У меня есть виджет чата, который выдает массив сообщений каждый раз, когда я прокручиваю вверх. Проблема, с которой я сейчас сталкиваюсь, заключается в том, что ползунок остается зафиксированным сверху при загрузке сообщений. Я хочу сосредоточиться на последнем элементе индекса из предыдущего массива. Я понял, что могу делать динамические ссылки, передавая индекс, но мне также нужно знать, какую функцию прокрутки использовать для достижения этой цели.

 handleScrollToElement(event) {
    const tesNode = ReactDOM.findDOMNode(this.refs.test)
    if (some_logic){
      //scroll to testNode      
    }
  }

  render() {

    return (
      <div>
        <div ref="test"></div>
      </div>)
  }

Реакт 16.8+, Функциональный компонент

import React, { useRef } from 'react'

const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop)   
// General scroll to element function

const ScrollDemo = () => {

   const myRef = useRef(null)
   const executeScroll = () => scrollToRef(myRef)

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div> 
         <button onClick={executeScroll}> Click to scroll </button> 
      </>
   )
}

Нажмите здесь для полной демонстрации по StackBlits

Реагировать 16.3 +, Класс компонента

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()  
    }

    render() {
        return <div ref={this.myRef}></div> 
    }  

    scrollToMyRef = () => window.scrollTo(0, this.myRef.current.offsetTop)   
    // run this method to execute scrolling. 

}

Компонент класса - Ref обратный вызов

class ReadyToScroll extends Component {
    myRef=null
    // Optional

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    } 

    scrollToMyRef = () => window.scrollTo(0, this.myRef.offsetTop)
    // run this method to execute scrolling. 
}

Не используйте строковые ссылки.

Строковые ссылки наносят вред производительности, не поддаются компоновке и находятся на выходе (август 2018 г.).

Строковые ссылки имеют некоторые проблемы, считаются устаревшими и, вероятно, будут удалены в одном из будущих выпусков. [Официальная документация React]

ресурс1 ресурс2

Необязательно: сгладить анимацию прокрутки

/* css */
html {
    scroll-behavior: smooth;
}

Передача ссылки ребенку

Мы хотим, чтобы ссылка была присоединена к элементу dom, а не к компоненту реакции. Таким образом, передавая его дочернему компоненту, мы не можем назвать опорный реф.

const MyComponent = () => {
    const myRef = useRef(null)
    return <ChildComp refProp={myRef}></ChildComp>
} 

Затем прикрепите опору к элементу dom.

const ChildComp = (props) => {
    return <div ref={props.refProp} />
}

это сработало для меня

this.anyRef.current.scrollIntoView({ behavior: 'smooth', block: 'start' })

РЕДАКТИРОВАТЬ: Я хотел бы расширить это на основе комментариев.

const scrollTo = (ref) => {
  if (ref /* + other conditions */) {
    ref.scrollIntoView({ behavior: 'smooth', block: 'start' })
  }
}

<div ref={scrollTo}>Item</div>

Просто найдите верхнюю позицию элемента, который вы уже определили https://www.w3schools.com/Jsref/prop_element_offsettop.asp, затем перейдите к этой позиции с помощью scrollToметода https://www.w3schools.com/Jsref/met_win_scrollto.asp

Примерно так должно работать:

handleScrollToElement(event) {
  const tesNode = ReactDOM.findDOMNode(this.refs.test)
  if (some_logic){
    window.scrollTo(0, tesNode.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref="test"></div>
    </div>)
}

ОБНОВИТЬ:

так React v16.3React.createRef() является предпочтительным

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

handleScrollToElement(event) {
  if (<some_logic>){
    window.scrollTo(0, this.myRef.current.offsetTop);
  }
}

render() {

  return (
    <div>
      <div ref={this.myRef}></div>
    </div>)
}

Использование findDOMNode в конечном итоге будет устаревшим.

Предпочтительным методом является использование обратных ссылок.

Github Eslint

Теперь вы можете использовать useRef API реагирования хука

https://reactjs.org/docs/hooks-reference.html#useref

декларация

let myRef = useRef()

составная часть

<div ref={myRef}>My Component</div>

использование

window.scrollTo({ behavior: 'smooth', top: myRef.current.offsetTop })

Вы также можете использовать scrollIntoViewметод для прокрутки к данному элементу.

handleScrollToElement(event) {
const tesNode = ReactDOM.findDOMNode(this.refs.test)
 if (some_logic){
  tesNode.scrollIntoView();
  }
 }

 render() {
  return (
   <div>
     <div ref="test"></div>
   </div>)
}

Возможно, я опоздал на вечеринку, но я пытался правильно реализовать динамические ссылки в своем проекте, и все ответы, которые я нашел до тех пор, пока не знали, не удовлетворяют меня по вкусу, поэтому я нашел решение, которое, мне кажется, простой и использует родной и рекомендуемый способ реагирования для создания ссылки.

иногда вы обнаруживаете, что при написании документации предполагается, что у вас есть известное количество просмотров, и в большинстве случаев это число неизвестно, поэтому в этом случае вам нужен способ решения проблемы, создайте динамические ссылки на неизвестное количество просмотров, которое вам нужно показать в классе

поэтому самое простое решение, которое я мог придумать и работать безупречно, заключалось в следующем

class YourClass extends component {

state={
 foo:"bar",
 dynamicViews:[],
 myData:[] //get some data from the web
}

inputRef = React.createRef()

componentDidMount(){
  this.createViews()
}


createViews = ()=>{
const trs=[]
for (let i = 1; i < this.state.myData.lenght; i++) {

let ref =`myrefRow ${i}`

this[ref]= React.createRef()

  const row = (
  <tr ref={this[ref]}>
<td>
  `myRow ${i}`
</td>
</tr>
)
trs.push(row)

}
this.setState({dynamicViews:trs})
}

clickHandler = ()=>{

//const scrollToView = this.inputRef.current.value
//That to select the value of the inputbox bt for demostrate the //example

value=`myrefRow ${30}`

  this[value].current.scrollIntoView({ behavior: "smooth", block: "start" });
}


render(){

return(
<div style={{display:"flex", flexDirection:"column"}}>
<Button onClick={this.clickHandler}> Search</Button>
<input ref={this.inputRef}/>
<table>
<tbody>
{this.state.dynamicViews}
<tbody>
<table>
</div>


)

}

}

export default YourClass

таким образом, свиток перейдет в любую строку, которую вы ищете ..

ура и надеюсь, что это помогает другим

Июль 2019 - выделенный крюк / функция

Выделенная ловушка / функция может скрывать детали реализации и предоставляет простой API для ваших компонентов.

Реакция 16.8 + функциональный компонент

const useScroll = () => {
  const htmlElRef = useRef(null)
  const executeScroll = () => window.scrollTo(0, htmlElRef.current.offsetTop)

  return [executeScroll, htmlElRef]
}

Используйте его в любом функциональном компоненте.

const ScrollDemo = () => {
    const [executeScroll, htmlElRef] = useScroll()
    useEffect(executeScroll, []) // Runs after component mounts

    return <div ref={htmlElRef}>Show me</div> 
}

полное демо

Реагировать 16,3 + класс Компонент

const utilizeScroll = () => {
  const htmlElRef = React.createRef()
  const executeScroll = () => window.scrollTo(0, htmlElRef.current.offsetTop)

  return {executeScroll, htmlElRef}
}

Используйте его в любом компоненте класса.

class ScrollDemo extends Component {
  constructor(){
    this.elScroll = utilizeScroll()
  }

  componentDidMount(){
    this.elScroll.executeScroll()
  }

  render(){
    return <div ref={this.elScroll.htmlElRef}>Show me</div> 
  }
} 

Полная демонстрация

Вы можете попробовать так:

 handleScrollToElement = e => {
    const elementTop = this.gate.offsetTop;
    window.scrollTo(0, elementTop);
 };

 render(){
  return(
      <h2 ref={elem => (this.gate = elem)}>Payment gate</h2>
 )}

Вы можете использовать что-то вроде componentDidUpdate

componentDidUpdate() {
  var elem = testNode //your ref to the element say testNode in your case; 
  elem.scrollTop = elem.scrollHeight;
};

У меня был простой сценарий: когда пользователь нажимает на элемент меню в моей панели навигации пользовательского интерфейса для материалов, я хочу прокрутить их вниз до раздела на странице. Я мог бы использовать ссылки и пропустить их через все компоненты, но я терпеть не могу многопоточные реквизиты, потому что это делает код хрупким.

Я просто использовал vanilla JS в своем реактивном компоненте, оказалось, что он работает просто отлично. Поместил идентификатор в элемент, который я хотел прокрутить, и в своем компоненте заголовка я только что сделал это.

const scroll = () => {
  const section = document.querySelector( '#contact-us' );
  section.scrollIntoView( { behavior: 'smooth', block: 'start' } );
};

Следуй этим шагам:

1) Установите:

npm install react-scroll-to --save

2) импортировать пакет:

import { ScrollTo } from "react-scroll-to";

3) Использование:

class doc extends Component {
  render() {
    return(
      <ScrollTo>
        {({ scroll }) => (
          <a onClick={() => scroll({ x: 20, y: 500, , smooth: true })}>Scroll to Bottom</a>
        )}
      </ScrollTo>
    )
  }
}

Вот фрагмент кода компонента класса, который можно использовать для решения этой проблемы:

Этот подход использовал ссылку, а также плавно прокручивается к целевой ссылке.

import React, { Component } from 'react'

export default class Untitled extends Component {
  constructor(props) {
    super(props)
    this.howItWorks = React.createRef() 
  }

  scrollTohowItWorks = () =>  window.scroll({
    top: this.howItWorks.current.offsetTop,
    left: 0,
    behavior: 'smooth'
  });

  render() {
    return (
      <div>
       <button onClick={() => this.scrollTohowItWorks()}>How it works</button>
       <hr/>
       <div className="content" ref={this.howItWorks}>
         Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nesciunt placeat magnam accusantium aliquid tenetur aspernatur nobis molestias quam. Magnam libero expedita aspernatur commodi quam provident obcaecati ratione asperiores, exercitationem voluptatum!
       </div>
      </div>
    )
  }
}

Самый хороший способ - это использовать element.scrollIntoView({ behavior: 'smooth' }) . Это прокручивает элемент в поле зрения с хорошей анимацией.

Когда вы комбинируете его с React useRef(), это можно сделать следующим образом.

import React, { useRef } from 'react'

const Article = () => {
  const titleRef = useRef()

  function handleBackClick() {
      titleRef.current.scrollIntoView({ behavior: 'smooth' })
  }

  return (
      <article>
            <h1 ref={titleRef}>
                A React article for Latin readers
            </h1>

            // Rest of the article's content...

            <button onClick={handleBackClick}>
                Back to the top
            </button>
        </article>
    )
}

Когда вы хотите перейти к компоненту React, вам нужно переслать ссылку на визуализированный элемент. Эта статья углубится в проблему .

Что сработало для меня:

class MyComponent extends Component {
    constructor(props) {
        super(props);
        this.myRef = React.createRef(); // Create a ref    
    }

    // Scroll to ref function
    scrollToMyRef = () => {
        window.scrollTo({
            top:this.myRef.offsetTop, 
            // behavior: "smooth" // optional
        });
    };

    // On component mount, scroll to ref
    componentDidMount() {
        this.scrollToMyRef();
    }

    // Render method. Note, that `div` element got `ref`.
    render() {
        return (
            <div ref={this.myRef}>My component</div>
        )
    }
}

Просто наперед, я не мог заставить эти решения работать с компонентами пользовательского интерфейса. Похоже, у них нет currentсобственности.

Я просто добавил пустую divсреди моих компонентов и установил опорную ссылку на это.

 <div onScrollCapture={() => this._onScrollEvent()}></div>

 _onScrollEvent = (e)=>{
     const top = e.nativeEvent.target.scrollTop;
     console.log(top); 
}

Для тех, кто читает это, кому не очень повезло с вышеупомянутыми решениями или просто хочет простое решение для встраивания, этот пакет работал для меня: https://www.npmjs.com/package/react-anchor-link- гладкой прокрутки . Счастливого взлома!

Я использовал это внутри функции onclick для плавной прокрутки до div, где его id - "step2Div".

let offset = 100;
window.scrollTo({
    behavior: "smooth",
    top:
    document.getElementById("step2Div").getBoundingClientRect().top -
    document.body.getBoundingClientRect().top -
    offset
});