Prevent vertical scroll outside of element, while scrolling on element.

incapsulateVerticalScroll.ls

/**
 * Prevent vertical scroll outside of elem, while scrolling on elem
 * @param {HTMLElement} elem
 */
function incapsulateVerticalScroll(elem) {
    elem.addEventListener('wheel', (event) => {
        if (event.deltaX !== 0) {
            return; // horizontal
        }

        const toTop = event.deltaY < 0;
        let target = event.target;

        while (target !== elem.parentElement) {
            let scrollOffset = target.scrollHeight - target.clientHeight;

            if (scrollOffset !== 0 && target.scrollTop !== (toTop ? 0 : scrollOffset)) {
                return; // no prevent needed
            }

            target = target.parentElement;
        };

        event.preventDefault();
    });
}