A scrollable container for arbitrary content with optional edge shadows and native scrolling APIs.
<nve-scroll-box aria-label="Activity" scroll-shadow style="height: 12rem">
<div nve-layout="column gap:md pad:md" style="height: 24rem">
<p nve-text="body">Training activity and resource allocation</p>
<p nve-text="body">Review training jobs across the cluster and inspect resource allocation for each workload.</p>
<p nve-text="body">The panel keeps its size while the application supplies the content and its layout.</p>
<p nve-text="body">Scroll in either direction to explore the full activity report and reach the content beyond the viewport.</p>
</div>
</nve-scroll-box>
Training activity and resource allocation
Review training jobs across the cluster and inspect resource allocation for each workload.
The panel keeps its size while the application supplies the content and its layout.
Scroll in either direction to explore the full activity report and reach the content beyond the viewport.
Installation
<script type="module">
import '@nvidia-elements/foundations/scroll-box/define.js';
</script>
<nve-scroll-box aria-label="Activity" scroll-shadow style="height: 12rem">
<div nve-layout="column gap:md pad:md" style="height: 24rem">
<p nve-text="body">Training activity and resource allocation</p>
<p nve-text="body">Review training jobs across the cluster and inspect resource allocation for each workload.</p>
<p nve-text="body">The panel keeps its size while the application supplies the content and its layout.</p>
<p nve-text="body">Scroll in either direction to explore the full activity report and reach the content beyond the viewport.</p>
</div>
</nve-scroll-box>
nve api.get nve-scroll-box
Both Axes
Both-axis scrolling keeps large content reachable within a constrained area. Use for wide diagrams or detailed content in a panel.
<nve-scroll-box aria-label="Activity" scroll-shadow style="width: 20rem; height: 12rem">
<div nve-layout="column gap:md pad:md" style="width: 40rem; height: 24rem">
<p nve-text="body">Training activity and resource allocation</p>
<p nve-text="body">Review training jobs across the cluster and inspect resource allocation for each workload.</p>
<p nve-text="body">The panel keeps its size while the application supplies the content and its layout.</p>
<p nve-text="body">Scroll in either direction to explore the full activity report and reach the content beyond the viewport.</p>
</div>
</nve-scroll-box>
Training activity and resource allocation
Review training jobs across the cluster and inspect resource allocation for each workload.
The panel keeps its size while the application supplies the content and its layout.
Scroll in either direction to explore the full activity report and reach the content beyond the viewport.
Vertical
Vertical scrolling keeps long activity lists within a fixed-height panel. Use edge shadows to indicate additional content above or below the viewport.
<nve-scroll-box orientation="vertical" scroll-shadow aria-label="Training activity" style="block-size: 12rem">
<div nve-layout="column gap:md pad:md">
<p nve-text="body">Training job 1</p>
<p nve-text="body">Training job 2</p>
<p nve-text="body">Training job 3</p>
<p nve-text="body">Training job 4</p>
<p nve-text="body">Training job 5</p>
<p nve-text="body">Training job 6</p>
<p nve-text="body">Training job 7</p>
<p nve-text="body">Training job 8</p>
<p nve-text="body">Training job 9</p>
<p nve-text="body">Training job 10</p>
<p nve-text="body">Training job 11</p>
<p nve-text="body">Training job 12</p>
</div>
</nve-scroll-box>
Training job 1
Training job 2
Training job 3
Training job 4
Training job 5
Training job 6
Training job 7
Training job 8
Training job 9
Training job 10
Training job 11
Training job 12
Horizontal
Horizontal scrolling keeps wide content accessible on narrow screens. Arrange children in a light DOM layout and enable edge shadows for overflow cues.
<nve-scroll-box orientation="horizontal" scroll-shadow aria-label="Training stages">
<div nve-layout="row gap:md pad:md" style="inline-size: max-content">
<p nve-text="body">Dataset preparation</p>
<p nve-text="body">Data validation</p>
<p nve-text="body">Data augmentation</p>
<p nve-text="body">Model configuration</p>
<p nve-text="body">Hyperparameter tuning</p>
<p nve-text="body">Resource allocation</p>
<p nve-text="body">Training execution</p>
<p nve-text="body">Checkpoint validation</p>
<p nve-text="body">Model evaluation</p>
<p nve-text="body">Model optimization</p>
<p nve-text="body">Deployment preparation</p>
<p nve-text="body">Production monitoring</p>
</div>
</nve-scroll-box>
Dataset preparation
Data validation
Data augmentation
Model configuration
Hyperparameter tuning
Resource allocation
Training execution
Checkpoint validation
Model evaluation
Model optimization
Deployment preparation
Production monitoring
Hidden scrollbars reduce visual weight while edge shadows indicate overflow. Use when an application provides another clear way to discover scrolling.
<nve-scroll-box orientation="vertical" scroll-shadow role="region" aria-label="Training activity" style="block-size: 12rem; --scrollbar-width: none">
<div nve-layout="column gap:md pad:md">
<p nve-text="body">Training job 1</p>
<p nve-text="body">Training job 2</p>
<p nve-text="body">Training job 3</p>
<p nve-text="body">Training job 4</p>
<p nve-text="body">Training job 5</p>
<p nve-text="body">Training job 6</p>
<p nve-text="body">Training job 7</p>
<p nve-text="body">Training job 8</p>
<p nve-text="body">Training job 9</p>
<p nve-text="body">Training job 10</p>
<p nve-text="body">Training job 11</p>
<p nve-text="body">Training job 12</p>
</div>
</nve-scroll-box>
Training job 1
Training job 2
Training job 3
Training job 4
Training job 5
Training job 6
Training job 7
Training job 8
Training job 9
Training job 10
Training job 11
Training job 12
Use the host's native methods, properties, and events. Listen for scroll and scrollend directly on the host; element scroll events do not bubble. RTL scrolling retains native coordinates.
const scrollBox = document.querySelector('nve-scroll-box');
scrollBox.scrollTo({ top: 100, behavior: 'smooth' });
scrollBox.addEventListener('scroll', () => {
console.log(scrollBox.scrollTop);
});
Automatic scrolling follows new messages while allowing readers to review earlier content. Use for chat responses or logs; return to the latest message to resume following.
<div nve-layout="column gap:md">
<nve-scroll-box id="follow-messages" orientation="vertical" auto-scroll="follow" scroll-shadow aria-label="Conversation" style="block-size: 12rem">
<div nve-layout="column gap:md pad:md">
<p nve-text="body">Conversation message 1</p>
<p nve-text="body">Conversation message 2</p>
<p nve-text="body">Conversation message 3</p>
<p nve-text="body">Conversation message 4</p>
<p nve-text="body">Conversation message 5</p>
<p nve-text="body">Conversation message 6</p>
<p nve-text="body">Conversation message 7</p>
<p nve-text="body">Conversation message 8</p>
<p nve-text="body">Conversation message 9</p>
<p nve-text="body">Conversation message 10</p>
<p nve-text="body">Conversation message 11</p>
<p nve-text="body">Conversation message 12</p>
</div>
</nve-scroll-box>
<nve-button id="follow-add-message">Add message</nve-button>
</div>
<script type="module">
const messages = document.querySelector("#follow-messages > div");
document.querySelector("#follow-add-message").addEventListener("click", () => {
const message = document.createElement("p");
message.setAttribute("nve-text", "body");
message.textContent = "Conversation message " + (messages.childElementCount + 1);
messages.append(message);
});
</script>
Conversation message 1
Conversation message 2
Conversation message 3
Conversation message 4
Conversation message 5
Conversation message 6
Conversation message 7
Conversation message 8
Conversation message 9
Conversation message 10
Conversation message 11
Conversation message 12
Add message Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release Docs Preview API Documentation Fully Themeable
beta Robust unit test coverages Passed API Review Passed Designer VQA Review Included in library package stable No known outstanding AA WCAG issues No known outstanding performance issues Adapts to different screen/container sizes No breaking API changes for at least 90 days