javascript - getBoundingClientRect on chrome doesn't change on scroll -
today came across following problem getboundingclientrect
.
let's added scroll event listener. on scroll log boundingclientrect of element. noticed things works expected on desktop, when turn on responsive mode in chrome value returned doesn't change. i'm using chrome version 56.0.2924.87 (64-bit). things working expected on ff , safari. possible explanation?
here code example:
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; padding: 0; font-family: sans-serif; height: 3000px; width: 3000px; } #box { background-color: red; width: 200px; height: 200px; } </style> </head> <body> <div id="box-wrapper"> <div id="box"></div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> <script> const throttle_wait = 150; const throttle_options = { leading: true, trailing: true, }; const boxwrapper = document.getelementbyid('box-wrapper'); const box = document.getelementbyid('box'); const resolveifelementisinviewport = (element) => { console.log(element.getboundingclientrect().top - window.scrolly); }; const onscroll = _.throttle(function (ev) { resolveifelementisinviewport(boxwrapper); }, throttle_wait, throttle_options); const onresize = _.throttle(function (ev) { resolveifelementisinviewport(boxwrapper); }, throttle_wait, throttle_options); window.addeventlistener('scroll', onscroll, true); window.addeventlistener('resize', onresize, true); </script> </body> </html>
Comments
Post a Comment