compute-scroll-into-view icon indicating copy to clipboard operation
compute-scroll-into-view copied to clipboard

Check of if element is in viewport can fail under certain conditions

Open Francesco-Lanciana opened this issue 4 years ago • 1 comments

Hello!

If you have the following scenario then the check starting on line 346 to see if the element is in the viewport will fail:

  1. You supplied no boundary and are not within a scrollable element
  2. You gave the HTML element a height of 100%
  3. You have scrolled more than the current height of the page

Seems that bottom property from getClientBoundingRect for the HTML element will be negative if conditions two and three hold. I think bottom = top + height in this condition, where top < -height since you scrolled more than the current height of the page. The check targetBottom <= bottom will then fail in this case because targetBottom will be positive.

I have no clue why this is the case, and I might be slightly off in my deduction but I guess to fix this you would need to have an if statement to check for if bottom is negative and if it is recalculate bottom using something like document.documentElement.clientHeight.

Happy to commit a PR if you agree with the cause + fix @stipsan :)

Francesco-Lanciana avatar Mar 07 '20 08:03 Francesco-Lanciana

Hey @Francesco-Lanciana! You're welcome to do a PR 😄 Good investigative work 🕵️

stipsan avatar May 27 '20 17:05 stipsan