Glitchy when clicking + dragging the scrollbar to scroll the page

[rftb]

Thanks for the great plugin! While I personally don't like scroll hijacks, this is the best plugin I've yet to find to make it the best user experience possible, so great work.

I've only had one major issue so far, and that's when clicking and dragging the scrollbar to scroll up/down the page. I've got a long home page with 6 sections and a footer revealed at the bottom. The first time I use the scrollbar, it's usually okay. But after that, the page has a glitch effect and doesn't allow the scrollbar to stay at the position I've dragged it to, or it stops at a random position somewhere in between.

The other side effect I've noticed is that about 85% of the time when clicking and dragging the scrollbar up/down the page, I can't get it to stay at the very bottom with the footer revealed. If I only use my mousewheel (pc) or magic mouse (mac) to scroll, it works perfectly as expected every single time.

The site I'm seeing this on is at http://www.hillwoodcommunities.com/. Please understand that these issues only happen when clicking and dragging the scrollbar, on both Mac and PC. Any help in debugging or work arounds would be super appreciated. Thank you!

Here's my code for reference:

HTML (basic idea)

<div class="section-hero section" id="section-hero" data-section-name="intro">
    ..CONTENT..
</div>
<div class="section-one section clearfix" id="section-communities" data-section-name="communities">
    ..CONTENT..
</div>
..MORE SECTIONS..
<div class="section-five section clearfix" id="section-meet-learn-explore" data-section-name="meet-learn-explore">
    ..CONTENT..
</div>
<footer>
    ..CONTENT..
</footer>

JAVASCRIPT

$.scrollify({
    section: ".section",
    sectionName: false,
    scrollSpeed: 1500,
    easing: "easeOutExpo",
    setHeights: false,
    updateHash: false,
    before: function(index, sections) {
        var ref = sections[index].attr('data-section-name');
        $('.section').each(function() {
            if( $(this).attr('data-section-name') === ref ) {
                $(this).addClass('active-section');
            }
            else {
                $(this).removeClass('active-section');
            }
        });

        // animations
        if( ref === 'communities' ) {
            $('#section-communities').find('.center-vert').addClass('fade-in');
        }
        if( ref === 'live-smart' ) {
	    $('#section-live-smart').find('.icon').addClass('fade-in');
	}
        if( ref === 'legacy' ) {
	    $('#section-legacy').find('.center-vert').addClass('fade-in');
	    $('#section-legacy').find('.img-bg').addClass('zoom');
	}
	if( ref === 'perot' ) {
	    $('#section-perot').find('.center-vert').addClass('fade-in');
	    $('#section-perot').find('.img-bg').addClass('zoom');
	}
    },
    afterRender: function(index, sections) {
        var currentSection = $.scrollify.current();
        currentSection.addClass('active-section').siblings().removeClass('active-section');

        // animations
        if( currentSection.attr('data-section-name') === 'communities' ) {
	    $('#section-communities').find('.center-vert').addClass('fade-in');
	}
        if( currentSection.attr('data-section-name') === 'live-smart' ) {
	    $('#section-live-smart').find('.icon').addClass('fade-in');
	}
	if( currentSection.attr('data-section-name') === 'legacy' ) {
	    $('#section-legacy').find('.center-vert').addClass('fade-in');
	    $('#section-legacy').find('.img-bg').addClass('zoom');
	}
	if( currentSection.attr('data-section-name') === 'perot' ) {
	    $('#section-perot').find('.center-vert').addClass('fade-in');
	    $('#section-perot').find('.img-bg').addClass('zoom');
	}
    }
});

jQuery(window).on('load resize', function() {
    // reveal footer
    var footerHeight = jQuery('footer').outerHeight();
    jQuery('.home').css('marginBottom', footerHeight);
});

[lukehaas]

I think this is because Scrollify doesn't have an awareness of the footer. Try setting the footer as an interstitialSection, see if that helps.

[rftb]

I did try that without success. I also tried including the footer in the last section, as well as setting the last section to use the standardScrollElements property. Neither made a difference. And the whole page works perfectly if I don't drag the scrollbar and just use the mouse to scroll.

[rftb]

Do you have any other ideas I might be able to try? I checked your demos to see if it does the same thing and I notice the same glitchy effect when using the scrollbar on the header footer demo, the full page video demo and the dynamic content demo. So basically all the ones that don't have the scrollbar hidden.

[lukehaas]

I'm not seeing glitchy behaviour. What browser are you using?

When you drag the scroll bar and let go Scrollify will snap it to the nearest section. Could this be what you're seeing?

[rftb]

I'm using Chrome on Mac but it was first noticed o=in Chrome on PC. It also happens in Firefox and IE on PC. I haven't checked Safari or Firefox on Mac.

It's not the snapping. From either the very top or bottom of the page, drag the scrollbar to the opposite end, maybe back and forth a few times. I see it every time.

[MathiasHC]

@lukehaas - I experienced the same issue in Chrome (Version 60.0.3112.78 (Official Build) (64-bit)) on a Mac as well. My solution description is underneath.

@rftb - removing the before and afterRender actually fixed mine. Not sure if the problem is with those of the code within their functions.

• Still fooling around to complete my debugging.

[rftb]

@MathiasHC thanks for your solution. I unfortunately can't remove the before and afterRender though because I'm using them to trigger animations for each section.

[lukehaas]

The before and afterRender callbacks will only execute the code you've defined. Nothing within Scrollify uses them.

[MathiasHC]

Yeah, noticed that @rftb when I inspected the code on the link you posted 💪🏼

[lukehaas]

I've recorded a video of dragging the scroll bar - up and down the page at first and then to individual sections. Can you let me know if you can see the issue you're having in the video? https://projects.lukehaas.me/scrollify/scrollify.mov

[rftb]

@lukehaas no I don't see it in your video. Here's one I recorded just now so you can see what I'm experiencing. Should've thought of this before.. sorry. http://rideforthebrand.net/clients/donia/hillwood-scrolling.mov

[optimadesign]

@rftb did you ever resolve this? We are seeing the same issue.

[anahitghazaryan]

Hi All,

Am also facing the above issue. Any solution so far?

Thanks.

[rftb]

@optimadesign @anahitghazaryan No never resolved it.. sorry I can't be of more help

[nsynsynsy]

I'm facing the same issue, here is my solution. Try to change the Scrollspeed faster, below 1000.

If I set it to 2000, the Glitchy problem shows up. if it is below 1000, the Glitchy is not gone, but it is much much smoother than previous setting.