question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Always scrolls to top when scrolling to item with positioned relative parent in container

See original GitHub issue

References #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:open
  • Created 6 years ago
  • Comments:6

github_iconTop GitHub Comments

1reaction
klis87commented, Jun 4, 2019

@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.

0reactions
erangocommented, Jun 4, 2019

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?

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found