lukehaas / Scrollify

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

Allow preventDefault on wheelEvents, fix Chrome intervention console logs #374

Closed timdk closed 5 years ago

timdk commented 5 years ago
lukehaas commented 5 years ago

Thanks

mabrodeur commented 5 years ago

Should you also use removeEventListener to remove the event instead of jQuery .off()?

AustrisBalodis commented 5 years ago

I tried this fix on the Scrolify DEMO page and the transitions just became less glitchy.

chrisnetonline commented 5 years ago

Any ETA on getting a new release tagged?

andrejasoko commented 5 years ago

this fixed the console errors, but scrolling is still very glitchy

lars2011 commented 5 years ago

Thanks guys! For me the same. console warnings disappeared, but scrolling is still extremely glitchy. is there any update on this?

nckblu commented 5 years ago

Do we know what has caused the glitchiness?

mabrodeur commented 5 years ago

On my end, I also added capture: true after the passive: false in the eventListener and I do not have glitchiness. Maybe that is what helps?

mabrodeur commented 5 years ago

As you can see on the website I used Scrollify it works great: https://clubkombucha.ca/en/products#bitter

andrejasoko commented 5 years ago

@mabrodeur that seems to be it! could you share the code or file or whatever? :)

mabrodeur commented 5 years ago

If you get the latest file, change line 380 from window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false }); to window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false, capture: true });

lars2011 commented 5 years ago

Thank you guys. I immediately tried your solution, but it doesn't seem to fix my problem. I tried it on a protected staging server, that isn't exposed - But here is the original site without the latest fix. There you can see my problem:

https://group.pfeiffer-vacuum.com/annual-report-2018/

In Chrome & Safari I have heavy glitching while scrolling with the mouse wheel. On Firefox it works perfectly. Can you reproduce the problem with your browsers on this page?

andrejasoko commented 5 years ago

@mabrodeur i figured that's what you meant, but unfortunately it's not doing anything. your website is working fine though (clubkombucha). are you sure you didn't change anything else??

@lars2011 yeah, your page is buggy on Chrome.

dejanbabic commented 5 years ago

@lars2011 do you have any solution for this problem? I have the same problem and I don't know what can I do.

hamza-attiq commented 5 years ago

@lars2011 I'm facing the exact same issue on 2 websites. Can anyone help me to resolve this issue?

URL : https://bestercapitalmedia.com/

nckblu commented 5 years ago

I have had a look at this issue and I really cannot work out what Chrome has changed in their latest version that has messed up the smoothness of the transition (there is also some sort of miscalculation going on). if you look at the wheelHandler method there are values (magic numbers) that can be tweaked which does result in some reduction in the glitch. If anyone actually knows what the issue is I can look at making a PR for it but at the moment i'm struggling to see what it is.

lukehaas commented 5 years ago

@nckblu the wheelHandler method detects the users scrolling (direction and acceleration etc) it doesn't directly manipulate the scrolling of the page. The only method that does this is animateScroll.

mabrodeur commented 5 years ago

Here is my file if anyone wants it. https://gist.github.com/mabrodeur/535908298f196343bec6ced3a9587a7a

I didn't change much things... The main difference I think is the way the e = e || window.event;is handled. I also changed the way the destroy function is working to really reset everything. I needed this because my website is all ajax and when I come back to a page I need everything to reset properly. There is no glitch with my version (don't really know why) and you can test it out here : https://clubkombucha.ca/en/products#bitter

andrejasoko commented 5 years ago

@mabrodeur thanks for the file, but it's the same.

perhaps you are using a specific set of settings that don't glitch?

mabrodeur commented 5 years ago

Here are my settings if it might help:

$.scrollify({
  section: ".node-product.view-mode-full",
  sectionName: "section-name",
  // interstitialSection: "",
  easing: "easeOutExpo",
  scrollSpeed: 800,
  offset: 0,
  scrollbars: true,
  standardScrollElements: "",
  setHeights: true,
  overflowScroll: true,
  updateHash: true,
  touchScroll: true,
  before: function (index, sections) {
    // ...
  },
  after: function (index, sections) {
    // ...
  },
  afterResize: function () {
    // ...
  },
  afterRender: function () {
    // ...
  }
});
andrejasoko commented 5 years ago

thats it... setHeights has to be true.

the original .js works just fine for me then :)

lars2011 commented 5 years ago

@andrejasoko For me it works too with setHeights:true, but only if a section is not longer than one particular screen. Could you check if it still works when a section has way more content than a simple screen? In my case it then gets "jumpy" / glitchy while scrolling in chrome. Another simple solution is with CSS body {overflow:hidden}. It's basically the same effect that longer sections get cut off. In my non-developer opinion it seems to have to do with the calculation of variable heights...

andrejasoko commented 5 years ago

@lars2011 it doesn't work on long sections, and this time i can't find a way around it..

t00186568 commented 5 years ago

Adding body{overflow:hidden} as @lars2011 suggested solved the issue for me in Chrome, using Version 1.0.19 of Scrollify

salinap commented 5 years ago

The same problem in the last section https://www.ufgam.com/

dhpollock commented 5 years ago

For my use case, I was able to correct the jitter/stutter effect when scrolling with a mouse wheel in Chrome. In the 'wheelHandler' function, add a e.preventDefault() to if(locked) condition, on line 308.

if(locked) { return false; }

to

if(locked) { e.preventDefault(); return false; }

May need to do some additional testing prior to deployment but solves the issue in Chrome and does not alter behavior in Firefox.

e: changed line 318 to 308 as lars pointed out

lars2011 commented 5 years ago

Thanks @dhpollock ! I tested it and can confirm that the jitter is nearly completely gone. It is much better! Sometimes while scrolling very fast on long sections the stutter appears once, but then it's smooth again. So this seems to be the best workaround so far! Thank you very much! In my file and the file in the repo it is line 308...

andrejasoko commented 5 years ago

this fixes it for most use cases, thanks @dhpollock.

but the stutter still happens once you reach a scrollify section while scrolling trough a long regular section.

dhpollock commented 5 years ago

Can confirm that the jittering still exists in chrome around overflow sections.

I think I slightly improved the jitter (though it still exists, especially with erratic scrolling behaviors), by changing lines 620 and 639 such that the < becomes <= so it now reads : if(($this.css("height","auto").outerHeight()<=portHeight) || $this.css("overflow")==="hidden") { ... if(($this.outerHeight()<=portHeight) || (settings.overflowScroll===false)) {

This seems to give the overflow array the correct boolean values, least with the following settings being used: {scrollbars: true, standardScrollElements: "", setHeights: true, overflowScroll: true}

Not a solution but maybe a step in the right direction? YMMV

philipproth commented 5 years ago

Had the same problem with Chrome (Windows 10). For my use case setting offset to 1 instead of 0 does the trick.

offset: 1,

ZeldOcarina commented 5 years ago

I've got the same problem and cannot understand the proposed solutions!

arnespremberg commented 4 years ago

I had the same problem. The worst glitches got better by updating to the current version of the jquery.scrollify.js and it got somewhat better by changing that exact file as @mabrodeur stated above

If you get the latest file, change line 380 from window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false }); to window.addEventListener(wheelEvent, manualScroll.wheelHandler, { passive: false, capture: true });

Still it's not as smooth as it should be, so I'd be very thankful if there is a real fix to be released somewhen in the future