Closed sunchayn closed 5 years ago
I appreciate your patience @mazentouati
I've run into this problem before!
getBoundingClientRect()
includes CSS transforms applied to the element in the return value.
So when using options.distance
to move your element visually by 20px
, you are actually changing the position of that element as far as getBoundingClientRect()
is concerned. Arguably this is a good feature: we can get the true rendered position of our elements!
The problem is that we are animating CSS transforms... which means getBoundingClientRect()
will give different size/position information depending on the progress of the animation!! This is where the "glitchy behavior" comes from.
This is actually the reason ScrollReveal does not use
getBoundingClientRect()
internally to check element positions! Check out how ScrollReveal does this using getGeometry, which returns element size/position without factoring in CSS Transforms.
In short, you'll need another way to check element positions!
Hi there,
Thanks for this awesome library.
I want to use on scroll event to detect if an element is partially visible; if it is visible in the viewport, scroll to the top offset of this element.
The code I wrote seems to work fine, but when I use
options.distance
I get strange behavior: The element that I want to scroll to becomes glitchy and sometimes the thescrollIntoView
does not work quite right...I think it's almost working, but ScrollReveal reverts the scroll offset to it's previous position causing the glitches. Check out the demo: https://jsbin.com/vukoqasemo/1/edit?html,js,output
In the demo it occurs randomly, but on my web page, it occurs more often and more aggressively.