search

alvarotrigo / fullPage.js

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple
http://alvarotrigo.com/fullPage/
GNU General Public License v3.0
35.02k stars 7.3k forks source link

hybrid normal_scrolling #4617

Open halukkaramete opened 1 week ago

halukkaramete commented 1 week ago

Description

Hi Alvatrigo, When we set the NORMAL_SCROLLING to FALSE we enjoy the full-page panels snapping into place. Needless to point out, this causes the HTTP address bar to be visible on our mobile devices -- taking up some valuable space. When we set the NORMAL_SCROLLING to TRUE , however, we get the benefit of claiming all that space, making the rendering of the page APP-like.

In my project, I have many YouTube players on each panel, when I enable the normal_scrolling, people can scroll those panels really fast and this causes the iPhone (IOS safari browser) to crashfrom time to time. I could not prevent each sections afterLoad event from being fired when such a fadt scrolling action take place. And This forces me to disable the NORMALSCROLLING mode

I was thinking perhaps, it is possible to come up with a hybrid solution.

  1. Set the normal scrolling to TRUE
  2. Have some js code to stop the scrolling as soon as the next section boundaries are arrived.
  3. This NORMAL_SCROLLING mode would still behave like one section at a time, but yet there is no address bar.

Is it possible to implement something like this? Or Would there be an inherent that would render the whole effort and exploration worthless?

Link to isolated reproduction with no external CSS / JS

[Ideally in jsfiddle.net (https://jsfiddle.net/alvarotrigo/ea17skjr) or codepen.io (https://codepen.io/alvarotrigo/pen/NxyPPp), links to personal websites won't be reviewed unless isolated. Reported issues without a reproduction might get closed.]

Steps to reproduce it

  1. [First step]
  2. [Second step]
  3. [and so on...]

Versions

[Browser, operating system, device, ...]

alvarotrigo commented 1 week ago

When we set the NORMAL_SCROLLING to FALSE we enjoy the full-page panels snapping into place. Needless to point out, this causes the HTTP address bar to be visible on our mobile devices -- taking up some valuable space.

I guess by NORMAL_SCROLLING you mean [autoScrolling](https://alvarotrigo.com/fullPage/docs/#:~:text=be%20used%20instead.-,autoScrolling,-%3A%20(default)? There's no option named NORMAL_SCROLLING

I'm not sure what web browser or device you are using, but when using autoScrolling:true on Safari and Chrome on iOS the navigation bar gets hidden when scrolling down and is shown when scrolling up. So this is not a problem.

alvarotrigo commented 1 week ago
  • Have some js code to stop the scrolling as soon as the next section boundaries are arrived.

You can probably achieve this by using fullpage_api.setAllowScrolling(false); after you leave a specific section. Then you can enable scrolling again based on your condition, which is this case is checking if the destination section contains the class fp-completely. Meaning the section is fully visible on the viewport.

fp-completely is a class that is not documented but you can give it a try :)

I guess in the future I can just create a callback such as afterFullyLoad or similar for cases in which the developers use autoScrolling:false.