search

lukehaas / Scrollify

A jQuery plugin that assists scrolling and snaps to sections.
MIT License
1.8k stars 579 forks source link

Mobile: Chrome / Safari have to scroll twice, past URL address bar before scroll kicks in #304

Open paulburgess opened 6 years ago

paulburgess commented 6 years ago

Hi - I can't post my example here for a few reasons, but we are having an issue where on a mobile you have to effectively scroll twice on each (100vh) section, once to scroll to from top of section to the bottom (50px-ish), then again to activate the auto-scroll. It's as if Scrollify isn't accounting for the space the browser chrome eats up.

Have tried removing the 100vh is the CSS and setting / not setting heights via options - oddly, the main Scrollify demo site doesn't do this.

Does anyone know what I'm missing or doing wrong?

Many thanks!

paulburgess commented 6 years ago

Fixed this by setting overflowScroll: false and setHeights: false, and set the section heights myself using $('section').css('height',$(window).height()) (which excludes browser bars etc.)

Hope that helps someone - cheers!

walrusdunne commented 6 years ago

The problem is with mobile browsers and vh. Chrome and iOS both see 100vh as the the height with the top URL bar hidden. So if the URL bar is shown, 100vh is taller than the visible viewport. Can read more about it here: https://github.com/bokand/URLBarSizing

I'm currently having an issue trying to get the sections to resize when the URL bar is hidden to take up the remaining space (so that they are 100vh), but cannot use overflowScroll: false as I do have sections longer than this.

agilbert commented 6 years ago

Note that I was able to fix this behavior simply by setting overflowScroll: false. That doesn't address the issue that part of your content will still be hidden beneath the toolbar on the bottom, but it did alleviate the double-scrolling issue.