Scrollify - Breaks When Section Display Set to None

This in reference to the awesome scrollify library from Luke Haas: jQuery Scrollify - Power steering for your scroll wheel

In my project I’m having to redesign a couple of the sections to look better on mobile since styling the existing section just isn’t looking how I want it to. I end up making a new section and then setting the display of the desktop version to none. Now I’m getting an issue where Scrollify can’t scroll past the invisible section. Instead, it snaps back up to the top of the page. I’m guessing that Scrollify still “sees” it.

I’m getting this on both the mobile and desktop versions (In the desktop version: the mobile sections are hidden. In the mobile version: the desktop sections are hidden).

I have tried switching to fullpage.js to rectify the issue but it wasn’t playing nicely with my setup and webflow interactions.

There is currently a github link which talks about the issue. It would be nice to modify this code to get it to work with my setup: Breaks when display: none; · Issue #215 · lukehaas/Scrollify · GitHub

Here’s what I currently have pasted into my sitewide header code. WARNING: I AM NO CODER. :

// CHECKS WINDOW SIZE AND ADDS/REMOVES SECTIONS
    var $window = $(window);

    function checkWidth() {
        var windowsize = $window.width();
        // if windowsize is less than 647 it adds mobile sections and removes desktop sections.
        if (windowsize < 647) {
            .add(".section.mobile, .standard.mobile");
            .remove(".section.desktop, .standard.desktop");
            $.scrollify.update();
        }
        if (windowsize >= 647) {
            .remove(".section.mobile, .standard.mobile");
            $.scrollify.update();
        }
    }
    
    // Execute on load
    checkWidth();
    // Bind event listener
    $(window).resize(checkWidth);

Any help would be appreciated! This little problem is driving me nuts!

1 Like

Hi KKjell,

I am having a very similar problem. Did you find a solution and can you share with me please?

Cheers,
Dave

Unfortunately I couldn’t find a solution. I tried switching over to fullpage.js but encountered the same thing. I actually ended up removing this feature anyway because some of my pages ended up being longer and I didn’t want to annoy my users.

Sorry I couldn’t be of more help!

:frowning: Oh well. Thanks for your efforts!