Scroll
Configure smooth scroll to bring the active step target into view.
The scroll feature smoothly scrolls the page to bring the active step's target element into view. It uses a custom requestAnimationFrame animation so duration, easing, and offset are fully configurable.
Config
| Property | Type | Default | Description |
|---|---|---|---|
block | ScrollLogicalPosition | center | Vertical alignment — start, center, end, nearest |
inline | ScrollLogicalPosition | nearest | Horizontal alignment |
duration | number | 400 | Animation duration in ms. 0 for instant jump. |
easing | BordaScrollEasing | ease-in-out | Built-in preset or custom function |
offset.x | number | 0 | Horizontal pixel offset |
offset.y | number | 0 | Vertical pixel offset |
isLocked | boolean | false | Block manual page scroll while the tour is active. Set true to lock scrolling. |
await borda.mount({
steps: [
{
target: '#intro-section',
title: 'Welcome',
description: 'First step starts at the top of the page.',
placement: 'bottom-center',
},
{
target: '#bottom-section',
title: 'Down here',
description: 'The page scrolled to this element automatically.',
placement: 'top-center',
},
],
scroll: {
block: 'center',
duration: 600,
easing: 'ease-in-out',
offset: { y: -20 },
},
});
Easing presets
| Preset | Description |
|---|---|
linear | Constant speed |
ease | Default browser easing |
ease-in | Slow start, fast end |
ease-out | Fast start, slow end |
ease-in-out | Slow start and end |
Pass a custom function for full control:
scroll: {
easing: (progress) => progress * progress, // quadratic ease-in
}
Disabling scroll
Pass false to disable automatic scrolling entirely:
await borda.mount({
steps: [...],
scroll: false,
});
When animation.isEnabled is false globally, scroll still runs but becomes an instant jump regardless of duration.
Runtime API
// Scroll to any element programmatically
await instance.scroll.scrollTo(document.getElementById('target'));
// Check if a scroll animation is in progress
instance.scroll.isScrolling;