Обработка анимации прокрутки в реале

Каков правильный способ работы со строкой в ​​React? Мне очень нравится плавная прокрутка из-за лучшего UX. Поскольку манипулирование DOM в React является анти-шаблоном, я столкнулся с проблемой: как прокручивать плавно в какую-то позицию/элемент? Обычно я изменяю значение scrollTop элемента, но это манипуляция с DOM, которая не разрешена.

JSBIN

код:

import React from 'react';
import ReactDOM from 'react-dom';


class App extends React.Component {
  handleClick = e => {
    for (let i = 1; i <= 100; i++) {
      setTimeout(() => (this.node.scrollTop = i), i * 2);
    }
  };

  render() {
    const someArrayToMap = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

    return (
      <div ref={node => this.node = node} style={{overflow: 'auto', height: '100vh'}}>
        <button onClick={this.handleClick}>CLICK TO SCROLL</button>
        {
            [...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap,
            ...someArrayToMap].map((e, i) => <div key={i}>some text here</div>)
        }
      </div>
    );
  }
}


ReactDOM.render(<App />, document.getElementById('root'));

Как достичь этого в режиме Реагирования?

Ответы

Ответ 1

Вы можете просто использовать ссылки и метод scrollIntoView (с behavior: 'smooth' для плавной прокрутки). Это всего лишь несколько строк кода и не требует пакета.

Скажите, что это то, что вы хотите прокрутить до

<p ref={this.myRef} className="scrollToHere">[1] ...</p>

И какая-то кнопка

<button onClick={() => {this.scroll(this.myRef)}} className="footnote">[1]</button>

для вызова метода прокрутки 

class App extends Component {
  constructor() {
    super()
    this.myRef = React.createRef();

  scroll(ref) {
    ref.current.scrollIntoView({behavior: 'smooth'})
  }
}

ОБНОВЛЕНИЕ: поскольку этот метод еще не поддерживается всеми браузерами (обзор поддержки браузеров), вы можете использовать полизаполнение.

Ответ 2

window.scroll({top: 0, left: 0, behavior: 'smooth' }) работает для меня.

Вам также необходимо проверить совместимость браузера

Или используйте полифилл

Изменение: для полноты, вот как динамически заполнить с помощью веб-пакета.

if (!('scrollBehavior' in document.documentElement.style)) {
//safari does not support smooth scroll
  (async () => {
    const {default: smoothScroll} = await import(
      /* webpackChunkName: 'polyfill-modern' */
      'smoothscroll-polyfill'
      )
    smoothScroll.polyfill()
  })()
}

Благодаря этому динамическому полифильму пакет загружается через ajax, если браузер не поддерживает плавную прокрутку.

polyfill-modern - это произвольное имя чанка, которое намекает компилятору веб-пакетов объединять пакеты, чтобы уменьшить количество запросов к серверу.

Ответ 4

В React имеется несколько библиотек для прокрутки к якорям. Выбор зависит от функций, которые вы ищете, и от существующей настройки вашей страницы.

React Scrollable Anchor - это легкая библиотека, специально предназначенная для прокрутки к якорям, привязанным к хэшам URL-адресов. Он также обновляет хеш-URL на основе сосредоточенного в данный момент раздела. [Полное раскрытие: я являюсь автором этой библиотеки]

React Scroll, упомянутый в другом ответе, является более полнофункциональной библиотекой для прокрутки к якорям без отражения местоположения в URL-адресе.

Вы также можете подключить что-то вроде React Router Hash Link Scroll, если вы уже используете React Router, который также будет привязан к хэш URL-адреса.

Ответ 6

Самый простой способ сделать: -

window.scrollTo({top: 0, left: 0, behavior: 'smooth' });

Этот простой код JavaScript работает со всеми браузерами.