javascript - Scroll event triggers, but no scrollTop or offset.top value -
following js code works, values offset().top , scrolltop(), respectively, remain @ 0.
$("body, html").scroll(function() { // event triggers on scrolling var foo = $("body, html").offset().top; var bar = $("body, html").scrolltop(); console.log(foo); // ==> 0 time console.log(bar); // ==> 0 time }); i have bad feeling somehow associated css overflow, can't figure out.
here runnable snippet:
$("body, html").scroll(function() { var bar = $(this).scrolltop(); console.log(bar); });html { overflow: auto; height: 100%; } body { overflow: auto; height: 100%; overflow-x: hidden; } div { background: #ff9900; }<html> <head> </head> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script> <div style="height: 1000px;">hi there.</div> </body> </html>
yes css overflow. shouldn't explicitly assign overflow when it's not needed, on body , html tags have set, length of div causes body scroll in case. setting overflow:auto properties causes conflict 2 scrollbars , can give wonky results.
i've setup basic example similar yours testing , works. scrolltop changes should. offsettop remains @ 0 because entire body stationary , you're scrolling down.
<html> <style> body { overflow-x: hidden; } div { background: #ff9900; } </style> <head> </head> <body id='body'> <div id="test" style="height: 1000px;">hi there. click me.</div> <script> document.getelementbyid('body').addeventlistener('click', function() { var scrollthing = document.getelementbyid('body').scrolltop; var scrollthing2 = document.getelementbyid('body').offsettop; console.log('scrolltop is' + scrollthing); console.log('offsettop is' + scrollthing2); }); </script> </body> </html>
Comments
Post a Comment