Shopify – Close Drawer On Scroll

It’s obviously a design decision that’s been taken at some point – when you open the cart drawer on Timber scrolling is disabled.

Can’t say I agree with it though, it’s more usual UX to have a minicart or drawer close when the user starts scrolling.

To re-enable scrolling you need to remove;

.js-drawer-open {
  overflow: hidden;
}

From assets/timber.scss.liquid. I’ve used this answer to add a timer to stop the scroll event firing all the time and affecting performance.

var scrollTimer = null;
$(window).scroll(function () {
    if (scrollTimer) {
        clearTimeout(scrollTimer);   // clear any previous pending timer
    }
    scrollTimer = setTimeout(handleScroll, 100);   // set new timer
});

function handleScroll() {
    scrollTimer = null;
    if ($('body').hasClass("js-drawer-open")) {
        $(".js-drawer-close").trigger("click");
    }
}

I published this answer and originally used the recommendation to wrap the scroll event in a click event for performance. It worked but I wasn’t happy with it, the user needed to click first and then scroll, which I didn’t like.

Here’s the code anyway for posterity’s sake

$(window).on('click', function() {
    $(window).on('scroll', function () {

        if ($('body').hasClass("js-drawer-open")) {
            $('.js-drawer-close').trigger("click");
        }

    });
});