pocketsize / bolts-wp

A starter theme for WordPress using Bolts
2 stars 0 forks source link

Implement a scroll.js module #63

Open djurnamn opened 4 years ago

djurnamn commented 4 years ago

Could be solved doing something like this:

// Check if element is in viewport
let isInViewport = function(elem) {
    let bounds = elem.getBoundingClientRect();

    return (
        bounds.top <= (window.innerHeight * 0.75 || document.documentElement.clientHeight)
    );
};

// Show element if in viewport
function showElementInViewport() {
    let elements = Array.from(
        document.querySelectorAll('.element-selector')
    );

    for (let i = 0; i < elements.length; i++) {
        if (isInViewport(elements[i])) {
            state.set('hidden', false, elements[i]);
        }
    }
}

// Check if element is in viewport and show it on scroll
window.addEventListener(
    'scroll', timing.throttle(showElementInViewport, 50)
);

// Check if element is in viewport and show it on document ready
showElementInViewport();
andreekeberg commented 4 years ago

Should be built into a scroll.js along with all other kind of scroll related methods like scrollTo, and the methods we use to set the scrolling (should be called scrolled by the way?), and scroll-direction states.