Smooth Scroll
When the element of a step is not fully in the viewport, the tour scrolls it into view. The scroll is instant by default, as in driver.js. With smoothScroll: true it is animated.
const { drive } = useDriver({
smoothScroll: true,
steps: [
{ element: "#page-header", popover: { title: "Top", description: "The tour starts at the top of the page." } },
{ element: "#page-footer", popover: { title: "Bottom", description: "The page scrolls down to this element." } },
],
});The second step of the demo below is a box at the bottom of this page, and the third step comes back up here.
Project settings
Sample content for the demo to highlight. None of these controls do anything.
How the scroll works
- A step whose element is already fully in the viewport does not scroll the page.
- The tour calls
element.scrollIntoView()withblock: "center"andinline: "center". An element taller than the viewport is scrolled withblock: "start", so its top edge is visible. - If the direct parent of the element is a scroll container (its content is taller than its box), the scroll is always instant. A smooth scroll inside a nested container would finish after the highlight has been measured, and the highlight would end up in the wrong place.
smoothScrollapplies to the whole tour and cannot be set per step. Change it between tours withsetConfig.
If the page layout keeps moving after the scroll (images loading, a sticky header settling), the highlight can end up offset. Call driver.refresh() once the layout is stable, or use waitForElement for content that renders late (see Interactive Tour). For what happens when the reader scrolls the element away during a step, see Element Out of View.
Blocking page scroll
With allowScroll: false the reader cannot scroll the page while the tour runs: the tour adds the driver-no-scroll class to <body>, which sets overflow: hidden on it. The tour's own scrolling still works. The default is true.
const { drive } = useDriver({
allowScroll: false,
steps: [/* ... */],
});Space between the two demo boxes, so the scroll is visible.
Project settings
Sample content for the demo to highlight. None of these controls do anything.