javascript - Detecting mousewheel with onscroll -


i tried several ways detect accurately mousewheel / dommousescroll event, seems result vary browser browser, , above hardware hardware. (ex: macbook magic trackpad fires many mousewheel events, etc.)

there has been many attempts of js library "normalize" wheeldelta of mousewheel event. many of them failed (i don't find relevant question anymore there point failure).

that's why try solution without mousewheel event, rather onscroll event. here example of scrolling / mousewheel detection hidden container scrolls (#scroller), , normal container (#fixed_container) normal content.

as #scroller has finite height (here 4000px), cannot detect scrolling / mousewheel infinitely...

how allow endless scroll events (by setting infinite height #scroller? how?) ?


code / live demo :

<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" />  <style> body { overflow:hidden; } #scroller { height: 4000px; }  #fixed_container { position:fixed; top:0px; left:0px; } #text { position:absolute; top:100px; left:100px; } </style>  <script type="text/javascript"> window.onscroll = function(e) {   console.log("scroll event detected! " + window.pagexoffset + " " + window.pageyoffset);   e.preventdefault();   return false; } </script> </head>  <body> <div id="scroller"></div> <div id="fixed_container"> <div id="text"> bonjour </div> </div> </body> </html> 

"how allow endless scroll events"

this should it:

$(window).scroll(function() {   var st= $(window).scrolltop();   var wh= $(window).height();   var sh= $('#scroller').height();    if(sh < st+wh*2) {     $('#scroller').css({       height: st+wh*2     });   }; }); 

tested in ie11, firefox, chrome, opera, , safari.

in fiddle below, clicking adds text, can see scroll:

fiddle


Comments

Popular posts from this blog

python - mat is not a numerical tuple : openCV error -

c# - MSAA finds controls UI Automation doesn't -

wordpress - .htaccess: RewriteRule: bad flag delimiters -