Jumping to top from last section in Hybrid Scrolling

[chrisg88]

We are seeing some odd behavior when re-entering the section wrapper (scrolling up).

Occasionally, the page will scroll to a point where a few pixels of the last section is visible. When this happens, scrolling back down causing the page to instantly jump to the top of the section wrapper.

Any ideas?

[d4nyll]

Which version are you using? Updating to version 2.4.1 should resolve this issue. Do let me know if the problem persists, we can resolve it together!

[chrisg88]

Thanks for the quick reply! I updated to 2.4.1 and the problem appears to persist. Specifically, it occurs on a hybrid page when scrolling up. When I reach the top of the "normal" section, sometimes the page will stop with ~1-15 pixels of the last section in the section wrapper visible. When this happens, scrolling back down causes the page to jump up to the first section. This can be replicated in the hybrid-scroll example page. I've also attached a short clip. smartscroll_jump.mov.zip

[chrisg88]

After some more testing, I was able to replicate this in Chrome, Safari and IE, but not Firefox.

[chrisg88]

Further testing - after placing a console log in the scrollTo function, I was able to see that when this occurs the pixel value being passed in is NaN. I setup a conditional here to check if the value is NaN first before executing. Adding an additional conditional to check if the sectionIndexAtWindowBottom is the same as sections.length allowed me to force this instance to scroll to the bottom of the section wrapper (+1 px). This has fixed the issue, but not as solid as I would like. I would prefer the page to stick to the top of the "normal" section when leaving the section wrapper.

[scottmacd80]

@chrisg88 could you post your code for this fix please chris?

[homewardmedia]

Fixed this by adding a check to see if you are the bottom of the page here:

   var sectionWrapperIsVisible = function () {
      var windowTop = getWindowTop();
      var windowBottom = windowTop + $(window).height();
      var pageHeight = $(document).height();  //ADDED THIS
      
      // Only affect scrolling if within the sectionWrapper area
      if(windowBottom == pageHeight){   //ADDED THIS
        return false;
      }
      if (
        windowBottom > sectionWrapperTop
        && windowTop 
Then make sure that this call wraps around the intended functionality.
if(sectionWrapperIsVisible()) {
    var windowTop = getWindowTop();
    var windowBottom = windowTop + $(window).height();

    etc.....

}

For some reason that is just sitting there not doing anything.
if(sectionWrapperIsVisible()) {
}

[stljeff1]

@homewardmedia This works for me. Thank you

[riku25591]

Any fix update on this issue ? The bug is still live.

[d4nyll]

Really sorry but I don't have any time at the moment to fix this.

The cause of the bug is because smartscroll is looking at the middle of the viewport to determine which slide is currently on the screen. But to decide whether it should scrolljack or not, it is looking at whether any part of the wrapper is visible in the viewport.

The bug occurs when the wrapper is visible but does not cross the middle of the viewport.

So when the screen is like this:

The solution is to detect when:

• The middle of the screen is 'above' the wrapper, if the scroll action is up, do nothing
• The middle of the screen is 'below' the wrapper, if the scroll action is down, do nothing

As always, PRs welcome.