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.

scrollTo function is broken

See original GitHub issue

Hello.

I have a project using React + Next, and I’ve recently updated to React 16 and Next 4. And after this updates, react-scroll stopped working. I’m not sure it’s related, but that’s the main change I’ve made recently.

I’m using v1.6.4

That’s how it’s setup:

import Scroll from 'react-scroll'
let Element = Scroll.Element
let scroller = Scroll.scroller

scrollTo = () => {
    scroller.scrollTo('element', {
      duration: 800,
      delay: 0,
      smooth: 'easeInOutQuart',
      containerId: 'element'
    })
  }

<MainButton href="javascript:void(0)" onClick={this.scrollTo}>Click me</MainButton>

<Element id="element" name="element"></Element>

Any clues on why it’s not working? Thanks

Issue Analytics

State:
Created 6 years ago
Comments:9 (3 by maintainers)

Top GitHub Comments

3reactions

dongapplyboardcommented, Oct 30, 2017

Having the same problem. ScrollTo as well as Link are both not working.

1reaction

tonoslavcommented, Nov 22, 2017

@podrivo what do you mean by “same lavel as trigger” what is trigger ?

@fisshy if you want this can fix it (at least it helped me)

In scroller.js line 75 add

scrollOffset = target.getBoundingClientRect().top + window.scrollY

Remove rest above related to scrollOffset

For me this solution works but I don’t use containers but I think with this solution it doesn’t matter Please try to implement it somehow, I need this to work