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.

Negative offset property value not working

See original GitHub issue
scroller.scrollTo(elementToScrollId, {
    offset: -200,
});

this is not working because of this source code line:

let scrollOffset = utils.scrollOffset(containerElement, target) + (props.offset || 0);

Issue Analytics

  • State:open
  • Created 5 years ago
  • Reactions:7
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
DanilloCorvalancommented, Oct 8, 2018

Any update on that one ? 😢

0reactions
BButnercommented, Dec 13, 2020

Is this still an issue? Could you provide a plunker debunking the issue?

This works for me

scroller.scrollTo('scroll-to-element', {
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart',
      offset: -50
    })

 <Element name="scroll-to-element" className="element">
          Scroll to element
</Element>

I’ve also updated the examples https://github.com/fisshy/react-scroll/blob/master/examples/basic/app.js#L91

FYI - It looks like the negative offset works fine, *as long as you’re using the Scroll.scroller to scrollTo an Element.

If you use Scroller.animateScroll and input a negative Offset, it does not seem to function. Actually, it seems like the animateScroll has some other issues as well.

For instance, say you have an index splash screen, where each section (div) takes up 100vw and 100vh. If you’re at the top of the page, and you click on something that calls animateScroll to the next section in line, it works fine. However, if you scroll down even a little, and then initiate the animateScroll, this does not function properly.

Read more comments on GitHub >

github_iconTop Results From Across the Web

jQuery Offset returns negative value - Stack Overflow
Just use dom offsetTop property. That will be a correct position despite whatever scrolling has happened before. $( something )[0].
Read more >
Cannot offset position of labels on map grid in La... - Page 3
I've been trying to do it with the following steps: Format Map Grid > Select 'Labels' from dropdown > Properties > Position >...
Read more >
offset - CSS: Cascading Style Sheets - MDN Web Docs
The offset CSS shorthand property sets all the properties required for animating an element along a defined path.
Read more >
outline-offset - CSS-Tricks
The outline-offset property in CSS offsets a defined outline from an element's border edge by a specified amount. An outline, which is ...
Read more >
Negative margins in CSS - QuirksBlog - QuirksMode
It is possible to give margins a negative value. ... Remember: margin collapsing does not work on margin-left and -right; just on -top...
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