Allow preventDefault on wheelEvents, fix Chrome intervention console logs

[timdk]

• Replace jQuery.on with addEventListener for wheelEvent
• Add passive: true to event options
• Check for event.originalEvent before accessing wheelDelta in wheelHandler function

[lukehaas]

Thanks

[mabrodeur]

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

[AustrisBalodis]

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

[chrisnetonline]

Any ETA on getting a new release tagged?

[andrejasoko]

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

[lars2011]

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

[nckblu]

Do we know what has caused the glitchiness?

[mabrodeur]

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]

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

[andrejasoko]

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

[mabrodeur]

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]

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]

@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]

@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]

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

URL : https://bestercapitalmedia.com/

[nckblu]

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]

@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]

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]

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

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

[mabrodeur]

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]

thats it... setHeights has to be true.

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

[lars2011]

@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]

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

[t00186568]

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

[salinap]

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

[dhpollock]

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]

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]

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]

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]

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]

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

[arnespremberg]

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