Scroll event not working on chrome and not precise in firefox

Question

I tried to build a custom scroll for my website but it's not perfect and I don't know how to improve it. It should scroll from one position to another specific position but there is a difference of pixels that become bigger every scroll events. It also seems to not work on chrome.

here is a link to the html file :http://infographie.inraci.be/blc/blc.html

here is the code :

$(window).bind('mousewheel DOMMouseScroll', function(event){

var hauteur5 = $(window).height();
var scroll5 = $(window).scrollTop();

         if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) {

        $(window).scrollTo(scroll5-hauteur5/4,1,function(){

      })
} else { 
  $(window).scrollTo(scroll5+hauteur5/4,1,function(){
 })
  }
 });

have you tried changing it so it uses the document instead of the window? — Skel, Feb 06 '18 at 17:20
also, use the generic `$(document).on('scroll')` instead of getting all fancy.. jQuery is meant to handle browser inconsistencies so let it — I wrestled a bear once., Feb 06 '18 at 17:25
when i use $(document).on('scroll') it doesn't work on both of them — Pierre Debroux, Feb 06 '18 at 17:41
i found why it was not really smooth in google chrome. I just put overflow hidden on the boddy and now it's working in chrome. — Pierre Debroux, Feb 06 '18 at 18:58

score 1 · Accepted Answer · answered Feb 06 '18 at 18:14

1

If you want check this snippet: https://stackoverflow.com/a/38572744/3605379

There I check the week speed with a timeout. Play with it so you can get the timing right.

answered Feb 06 '18 at 18:14

Simon Berton

468
5
13

thanks but i dont know how to use that to resolve my problem – Pierre Debroux Feb 06 '18 at 18:57
Sorry. I would look in your code where you set where each element is on the browser. For me would be easier to just use "$(".elementClass.").scrollTo() and not use the height or position, since it will change when you resize the browser. – Simon Berton Feb 06 '18 at 19:48
As it measure the height every time i scroll it does not matter if i resize the window? i m sorry i m not using jquery so much so maybe i don't get it. – Pierre Debroux Feb 06 '18 at 19:51
For now i ve solve it with your idea of "$(".elementClass.").scrollTo(). thanks ... but as they all have the same classname , how can i scroll to the next row of elements? – Pierre Debroux Feb 06 '18 at 19:55
for now ive use this solution, it works but its bad i think :) var zz=0 $(document).on('mousewheel DOMMouseScroll', function(event){ if (event.originalEvent.wheelDelta > 0 || event.originalEvent.detail < 0) { zz-=5 var arr=$("#image"+zz); if (zz<0){ zz=0 } $('html, body').stop().animate({scrollTop: $(arr).offset().top}, 0); } else – Pierre Debroux Feb 06 '18 at 19:57
you can use parent, siblings, next or prev. – Simon Berton Feb 06 '18 at 20:08

Scroll event not working on chrome and not precise in firefox

1 Answers1