Реагировать реагировать-прокрутка (прокрутить до Ref не работает) - PullRequest
Новая
       21

Реагировать реагировать-прокрутка (прокрутить до Ref не работает)

1 голос
/ 17 апреля 2020

Я бы хотел сгладить прокрутку до указанного c ref при нажатии кнопки. Я пытаюсь использовать 'response-scroll-to'. Существует документация о прокрутке до ссылки, и я попытался найти решение по этим вопросам здесь: stackoverflow и github. Но я не могу найти правильное решение. Пожалуйста, помогите мне разобраться в этом.

Заранее спасибо!

Я подготовил коды и поле здесь 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)

Ответы [ 2 ]

1 голос
/ 17 апреля 2020

Как упоминалось в @sava, я неправильно понял, как работает свойство ref scrollTo. Между прочим, основываясь на ответе @ sava, я только что исправил прокручивание кодов и ящиков до offsetTop нижней ссылки, и оно работает плавно. 

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

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

1 голос
/ 17 апреля 2020

Я думаю, вы не поняли, как работает свойство ref scrollTo. Ref сообщает функции scrollTo, какой элемент прокручивать, а не какой элемент прокручивать. Чтобы продемонстрировать это, я сделал развилку вашей песочницы и немного ее отредактировал: https://codesandbox.io/s/react-scroll-to-ref-nl6yz

Я бы попытался использовать встроенные методы реакции вместо этой библиотеки. Это было объяснено здесь: { ссылка }

...