fisshy / react-scroll

React scroll component
https://github.com/fisshy/react-scroll/blob/master/README.md
MIT License
4.36k stars 437 forks source link

Negative offset property value not working #339

Open pavel06081991 opened 6 years ago

pavel06081991 commented 6 years ago
scroller.scrollTo(elementToScrollId, {
    offset: -200,
});

this is not working because of this source code line:

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

DanilloCorvalan commented 6 years ago

Any update on that one ? 😢

fisshy commented 6 years ago

Not yet, feel free to make a PR to solve it :)

RomeroDiver commented 5 years ago

While this is still a bug, for my particular use case setting position: !static solved the issue.

fisshy commented 5 years ago

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

BButner commented 3 years ago

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.