Always scrolls to top when scrolling to item with positioned relative parent in container
See original GitHub issueReferences #277 I prepared demo showing this problem: https://codesandbox.io/s/l2k231jpo7
Generally, scrolling doesn’t work when trying to scroll to an element within containerId
, which also has a parent with position: relative
style. Both conditions must be true to cause this error.
This is caused by line https://github.com/fisshy/react-scroll/blob/master/modules/mixins/utils.js#L26 , to be exact - t.offsetTop
is always equal 0 in this case.
Do you have any ideas how to calculate correctly position in this case?
Issue Analytics
- State:
- Created 6 years ago
- Comments:6
Top Results From Across the Web
css - Fixed position but relative to container
An element with sticky position is positioned based on the user's scroll position. It basically acts like position: relative until an element is...
Read more >position - CSS: Cascading Style Sheets - MDN Web Docs
The element will scroll along with its container, until it is at the top of the container (or reaches the offset specified in...
Read more >Relative and absolute scrolling blues - HorusKol
It isn't. The item starts positioned relative to the bounding box - but it will keep its position relative to the parent (which...
Read more >CSS Position Sticky - How It Really Works! - Elad Shechter
CSS position sticky has two main parts, sticky item & sticky container. ... position, and it will always appear to stick to the...
Read more >Making an element sticky within a container
In this article, we'll be walking through the steps needed to achieve a sticky on scroll effect using CSS and jQuery. Style the...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
@erango I didnt try it once I found about polyfill I mentioned above. react-scroll is a nice library but if I can have similar functionality with native browser solution, I will always prefer those.
Thanks! A week after you opened this issue @fisshy fixed it – I think. Did you try the latest version? Or are you happy with your current solution?