Scrolling Settings - Advanced

• This is an inspector guide. Make sure to refer to the Introduction to the Inspector guide.
• Autoscroll is a very useful feature, especially when dealing with dynamic elements such as dropdowns, checkboxes, etc. By default, if you capture two screens, one with a checkbox unchecked and the other with it checked, and then link them together to simulate checking the checkbox, if the checkbox is not visible without scrolling, the second screen will begin scrolled to the top, making the experience not smooth. With auto-scroll, you'll be able to keep the screens in the same position while transitioning between them.
• Of course, there are countless other uses for this feature. However, it's not available by default in Demoboost, so we'll need to implement workarounds to enable automatic scrolling of screens.

There are two ways to do it.

Effortlessly kickstart your journey with our beginner-friendly guides!

Step 1: Open up the demo in the Editor.

Step 2: Locate the element you want to autoscroll to. Right-click on it and select Inspect.

Step 3: If the element has an id="[VALUE]" attribute (where [VALUE] could be anything), note it down. If it doesn't, right-click the element in Inspector, and select Edit as HTML, then add the id="[VALUE]" attribute. Replace [VALUE] with any identifier - "scroll", "anchor" - the choice is yours.

Step 4: Add the following HTML/JavaScript code below the element:

<script>

document.querySelector('#[YOUR-ID]').scrollIntoView({block: "center"});

</script>

Replace [YOUR-ID] with the ID you assigned to the element.

Note: you can control where the element will be after the scroll is complete by modifying the "center" value of the "block" property.

For more information, visit the documentation for the scrollIntoView method. https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Step 5:Click away to confirm the changes

Step 6: Save the screen.