React react-scroll-to (scroll to Ref not working)

Question

I'd like to smooth scroll to the specific ref on clicking a button. I'm trying to use 'react-scroll-to' There is a documentation about scrolling to the ref and I've tried to find the solution on here stackoverflow & github issues. But I can't find the proper solution. Please help me to figure this out.

Thanks in advance!

I prepared the codesandbox here https://codesandbox.io/s/react-scroll-to-ref-nwpq2?file=/src/index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { ScrollTo } from 'react-scroll-to'

import './styles.css'

class Child1 extends React.Component {
  render() {
    return (
      <div>
        <button onClick={this.props.scrollTo}>Scroll</button>
      </div>
    )
  }
}

class Child2 extends React.Component {
  render() {
    return (
      <div style={{ height: '500px', backgroundColor: 'blue' }}>Child 2</div>
    )
  }
}

class Example extends React.Component {
  constructor(props) {
    super(props)
    this.myRef = React.createRef()
  }
  render() {
    return (
      <div className="App">
        <h1>Index Component</h1>
        <ScrollTo>
          {({ scrollTo }) => {
            console.log(this.myRef)
            return (
              <Child1
                scrollTo={() =>
                  scrollTo({
                    ref: this.myRef,
                    // y: 100,
                    smooth: true
                  })
                }
              />
            )
          }}
        </ScrollTo>
        <Child2 />
        <div
          ref={this.myRef}
          style={{ height: '500px', backgroundColor: 'black' }}
        >
          Hello
        </div>
      </div>
    )
  }
}

const rootElement = document.getElementById('root')
ReactDOM.render(<Example />, rootElement)

score 2 · Accepted Answer · answered Apr 17 '20 at 14:48

As @sava mentioned, I misunderstood how the ref property of scrollTo works. By the way, Based on the @sava's answer, I've just fixed my codesandbox as scrolling to the bottom ref's offsetTop and it works smoothly.

              <Child1
                scrollTo={() =>
                  scrollTo({
                    y: this.myRef.current.offsetTop,
                    smooth: true
                  })
                }
              />

https://codesandbox.io/s/react-scroll-to-ref-nwpq2?file=/src/index.js

sava · Answer 2 · 2020-04-17T14:31:42.870

1

I think you misunderstood how the ref property of scrollTo works. Ref tells the scrollTo function which element to scroll, not which element to scroll to. To demonstrate this, I've made a fork of your sandbox and edited it a bit: https://codesandbox.io/s/react-scroll-to-ref-nl6yz

I would try to use react built in methods instead of this library. This has been explained here: https://stackoverflow.com/a/51828976/1779469

edited Apr 17 '20 at 14:31

answered Apr 17 '20 at 14:12

sava

53
7

thanks for your explanation. But is there any way to scroll the window to certain element with this library? or do you know anyone? – True Apr 17 '20 at 14:30
I don't think there is from what I can tell, you could probably get the Y coordinate of the element you want to scroll to then pass that coordinate to the scroll function, but that seems too tedious. Using built in methods are probably your best bet. – sava Apr 17 '20 at 14:33
1

I've just fixed my codesandbox to work properly with the current library. Thanks, again – True Apr 17 '20 at 14:49

React react-scroll-to (scroll to Ref not working)

2 Answers2