Pixelbased Scroll Snapping (no dependencies)

Tips & Tricks
1

The scrollSnapper function is designed to automatically adjust or "snap" the scroll position to predetermined points when the user scrolls the window. The snapping only occurs if the scroll position is outside of a defined tolerance for each point.

This function is ideal for scenarios where specific elements or sections of a webpage need to be entirely visible during scrolling, similar to the behavior of a slideshow or a slide deck.

How it works

On the hypeDocument, three properties are defined:

  • snapPoints: This is an array that defines the y-coordinate points (in pixels) where the scroll position should snap to. The values should be in ascending order. In this example, the snap points are [0, 550, 1200, 1900].
  • toleranceForward and toleranceBackward: These two properties define a "dead zone" around each snap point. If the current scroll position is within this zone, the scroll position is not adjusted. This prevents the function from constantly adjusting the scroll position while the user is actively scrolling. Both are set to 50 pixels in this example.

The function registers a 'scroll' event listener to the window object. On each scroll event:

  • If no snap points are defined, the function does nothing.
  • The function checks the current scroll position (window.scrollY) against each snap point.
  • If the current scroll position is within the tolerance of a snap point, no action is taken.
  • If the current scroll position is outside the tolerance of all snap points, the function identifies the closest snap point.
  • After a 1-second delay, the function smoothly scrolls the window to the closest snap point.

The function is designed to be attached to a Hype document's "Document Load" event. It uses the Hype-provided HYPE_eventListeners array to register the function callback.

How to use it

To use this function, you need to have the Hype JavaScript library loaded in your project. This function should be included in a <script> tag in your HTML file or as a part of your JavaScript source files.

Once you have the function defined, you don't need to do anything else. The function is automatically called when the Hype document is loaded due to its registration with HYPE_eventListeners.

Remember that the scrollSnapper function sets the snap points to [0, 550, 1200, 1900] and the tolerance to 50. If you want to set different snap points or tolerance, you need to modify these values in the scrollSnapper function.

function scrollSnapper(hypeDocument, element, event) {
    hypeDocument.snapPoints = [0, 550, 1200, 1900];
    hypeDocument.toleranceForward = 50;
    hypeDocument.toleranceBackward = 50;
    let scrollTimeout;

    window.addEventListener('scroll', () => {
        if (!hypeDocument.snapPoints) return;

        const currentScrollY = window.scrollY;

        let closest = null;
        let inDeadZone = false;
        for(let point of hypeDocument.snapPoints) {
            if(currentScrollY < point + hypeDocument.toleranceForward && currentScrollY > point - hypeDocument.toleranceBackward) {
                inDeadZone = true;
                break;
            }

            if(closest === null || Math.abs(currentScrollY - point) < Math.abs(currentScrollY - closest)) {
                closest = point;
            }
        }

        if(inDeadZone) return;

        clearTimeout(scrollTimeout);

        scrollTimeout = setTimeout(() => {
            window.scrollTo({
                top: closest,
                behavior: 'smooth'
            });
        }, 1000);
    });
}

if("HYPE_eventListeners" in window === false) { window.HYPE_eventListeners = Array(); }
window.HYPE_eventListeners.push({"type":"HypeDocumentLoad", "callback":scrollSnapper});

Example file

scrollSnapperPixelbasedExample.hype.zip (23,6 KB)

6 Likes