Frontend Configuration

Scroll Position Offset

Sometimes you need to scroll programatically to a certain vertical position on the DOM. For example when a user submits a form and the validation fails, it might want to scroll to the top of the form to show the user an error message. But when you have a sticky header, it's possible that your error message is underneath the header and not visible to the user.

For this case you can check if the global variable window.__confinityScrollOffsetTop is defined and subtract it from your target scroll position. When you use a sticky header, just define this variable somewhere in your JavaScript.

Some modules, like Confinity Forms, also use this variable to scroll. So don't forget to define it, if you have a sticky header or something like that.

Example for Scrolling with Offset

let elementPos = myElement.offsetTop;
const scrollOffset = window['__confinityScrollOffsetTop'];

if (scrollOffset && !isNaN(scrollOffset)) {
    elementPos -= scrollOffset;
}
window.scrollTo({top: elementPos, behavior: 'smooth'});

Custom scrollTo function

Sometimes the scroll is made on the wrong element. This is especially a problem with multiple scrollable elements. Therefore you can overwrite the scroll method by creating a function __confinityScrollTo on the window object.

// example implementation
window.__confinityScrollTo = (targetElement) => {
    // targetElement is a HTMLElement which sould be in focus after the scroll

    let positionFromTop = element.offsetTop;
    const scrollOffset = window.__confinityScrollOffsetTop;

    if (scrollOffset && !isNaN(scrollOffset)) {
        positionFromTop -= scrollOffset;
    }

    // in this case the scroll should happen on the window
    window.scrollTo({top: positionFromTop, behavior: 'smooth'});
}

The default implementation considers the variable window.__confinityScrollOffsetTop and tries to scroll on the provided element. It goes recursively up the DOM by following it's parents and scrolls on the first scrollable element.