01 · Page scrolling
Continue down the page
An ordinary wheel gesture over this chart scrolls the page. Hold Ctrl to zoom its horizontal scale, or drag the chart to pan. Scroll down to the next example when you are ready.
02 · A scrollable viewport
Scroll the rows, then the page
This chart has more rows than fit in its viewport. Ordinary wheel input scrolls the rows directly. At the top or bottom, further wheel input continues scrolling the page, like an overflowing DOM element. Hold Ctrl to zoom the horizontal scale instead.
The narrow scrollbar on the right shows your position among the 36 rows.
03 · An embedded cohort
Switch between overview and closeup
In overview, ordinary wheel input scrolls the page. To inspect individual samples, right-click a sample and choose Open closeup. Now wheel input scrolls the samples over both the chart and the metadata on the left. At either end, further input scrolls the page.
Hold Ctrl over the main chart to zoom. Use the context menu's Close closeup to return to overview. You can also hold E over a sample for a temporary closeup.
All 32 samples, their metadata, and their segments are generated locally for this example.
Keep scrolling
The surrounding page stays in control
Scroll back up to try the same boundaries in the other
direction. Each embed enables
wheelBehavior: "cooperative"; the host page
provides these instructions using ordinary HTML.