声明

Question

我有一个聊天小部件，每次向上滚动时都会提取一系列消息。我现在面临的问题是，当消息加载时，滑块保持固定在顶部，我希望它专注于前一个数组的最后一个索引元素。我发现我可以通过传递索引来制作动态引用，但我还需要知道使用什么样的滚动函数来实现它

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

  render() {

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

Answer 1

选项1：useRef钩子（反应16.8 +）

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

const ScrollDemo = () => {
    const myRef = useRef(null) // Create ref object

    useEffect(() => { // Add to scroll after component has mounted
        scrollToRef(myRef)
    }, []) // passing an empty array will run the function only once, similar to componentDidMount

    return (
        <React.Fragment>
            <button onMouseDown={()=>scrollToRef(myRef)} >Scroll from me</button>   
            {/* Demonstrates scroll on click */}
            <div ref={myRef}>Scroll to me</div> 
            {/* Attach ref object to a dom element */}
        </React.Fragment>
    )
}

Click here for a full demo on StackBlits

选项2：使用React.createRef（React 16.3 +）

class ReadyToScroll extends Component {

    constructor(props) {
        super(props)
        this.myRef = React.createRef()   // Create a ref object 
    }

    render() {
        return <div ref={this.myRef}></div> 
    }   // attach the ref property to a dom element

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

}

选项3：使用引用回调

class ReadyToScroll extends Component {

    constructor(props){   // Optional, declare a class field to improve readability
        super(props)
        this.myRef=null    
    }

    render() {
        return <div ref={ (ref) => this.myRef=ref }></div>
    }   // Attach the dom element to a class field

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

请勿使用字符串引用。

字符串引用损害性能，不可组合，并且即将淘汰（2018年8月）。

字符串引用存在一些问题，被认为是旧问题，并且可能在将来的版本之一中删除。 [官方React文档]

resource1 resource2

可选：平滑滚动动画

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

原理

可以将ref存储在类组件实例中（通过this访问它），也可以使用ref钩子（它需要在当前呈现器之外具有一定的持久性）
要滚动到某个元素，必须将ref对象附加到实际的dom元素；
可以将ref（采用上述两种方法之一）作为道具传递给孩子。

将裁判传递给孩子

将ref对象作为道具传递给子组件。

使用RefHook：

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

使用React.createRef-

render() {
    return <ChildComp refProp={this.myRef}></ChildComp>
}

然后将ref属性附加到dom元素上。

class ChildComp extends Component {
    render () {
        return <div ref={this.props.refProp} />
    }
}

更新

过去，我建议将选项对象传递给window.scrollTo，其中还包括一个控制动画的选项。 Edge 和 iOS 尚不支持此表单。

Answer 2

找到您已经确定的元素的顶部位置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.3 ，首选React.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>)
}

Answer 3

最终将弃用findDOMNode。

首选方法是使用回调引用。

github eslint

Answer 4

您还可以使用scrollIntoView方法滚动到给定元素。

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

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

Answer 5

这对我有用

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

Answer 6

最好的方法是使用Proxy-Connection: Keep-Alive。这样可以通过漂亮的动画将元素滚动到视图中。

将其与React的element.scrollIntoView({ behavior: 'smooth' })结合使用时，可以通过以下方式完成。

useRef()

当您想滚动到React组件时，需要将ref转发到渲染的元素。 This article will dive deeper into the problem。

Answer 7

我有一个简单的场景，当用户单击我的Material UI导航栏中的菜单项时，我想将它们向下滚动到页面上的该部分。我可以使用ref并将它们遍历所有组件，但是我讨厌threading props支持多个组件，因为这会使代码易碎。

我只是在我的react组件中使用了Vanilla JS，事实证明它工作正常。在要滚动到的元素上放置一个ID，然后在标头组件中这样做。

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

Answer 8

您可以尝试这种方式：

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

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

Answer 9

我可能参加聚会很晚，但是我试图以适当的方式对项目实施动态引用，并且找到所有答案，直到对我的喜好都不是那么满意，所以我想出了一个解决方案，我认为很简单，并且使用本机和推荐的反应方式来创建引用。

有时，您会发现编写文档的方式是假设您具有已知的视图数量，并且在大多数情况下该数目是未知的，因此在这种情况下，您需要一种解决问题的方法，对未知数目的对象创建动态引用您需要在课程中显示的视图

所以我能想到并能完美工作的最简单的解决方案是执行以下操作

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

这样，滚动条将转到您要查找的任何行。

欢呼并希望它能帮助其他人

Answer 10

您可以使用componentDidUpdate

之类的内容

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

Answer 11

您现在可以通过react hook API使用useRef

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 })

Answer 12

这是您可以用来解决此问题的 Class Component 代码片段：

此方法使用了参考，还平滑地滚动到目标参考

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>
    )
  }
}

Answer 13

我在onclick函数中使用了它，以平滑地滚动到其id为“ step2Div”的div。

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

Answer 14

如果有人在使用 Typescript，这里是 Ben Carp 的答案：

import React, {useRef} from "react";

export const useScroll = <T extends HTMLElement>(options?: boolean | ScrollIntoViewOptions): [() => void, React.RefObject<T>] => {
    const elRef = useRef<T>(null);
    const executeScroll = () => {
        if (elRef.current) {
            elRef.current.scrollIntoView(options);
        }
    };

    return [executeScroll, elRef];
};

Answer 15

为了自动滚动到特定元素，首先需要使用 document.getElementById 选择元素，然后我们需要使用 scrollIntoView() 滚动。请参考以下代码。

   scrollToElement= async ()=>{
      document.getElementById('id001').scrollIntoView();
    }

上述方法对我有用。

Answer 16

请按照以下步骤操作：

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>
    )
  }
}

Answer 17

请注意，我无法将这些解决方案用于Material UI组件。看起来他们没有#include <stdio.h> #include <ctype.h> #include <stdlib.h> void trampoline(void *(*func)()) { while (func) { void *call = func(); func = (void *(*)())call; } } void *thunk1(int *param); void *thunk_f(int *param); void *thunk1(int *param) { ++*param; trampoline(thunk_f(param)); return NULL; } void *thunk_f(int *param) { return thunk1(param); } int main(int argc, char **argv) { int a = 4; trampoline(thunk1(&a)); printf("%d\n", a); }属性。

我刚刚在组件之间添加了一个空current，并在其上设置了ref属性。

Answer 18

如果要在页面加载时执行此操作，可以使用useLayoutEffect和useRef。

import React, { useRef, useLayoutEffect } from 'react'

const ScrollDemo = () => {

   const myRef = useRef(null)

   useLayoutEffect(() => {
      window.scrollTo({
        behavior: "smooth",
        top: myRef.current.offsetTop,
      });
    }, [myRef.current]);

   return (
      <> 
         <div ref={myRef}>I wanna be seen</div>
      </>
   )
}

Answer 19

这是我的解决方案：

我在主div内放置了一个不可见的div，并使其位置变为绝对。然后将最高值设置为-（标题高度），并在此div上设置参考。或者，您也可以使用children方法来响应该div。

到目前为止效果很好！

<div className="position-relative">
        <div style={{position:"absolute", top:"-80px", opacity:0, pointerEvents:'none'}}  ref={ref}></div>

Answer 20

在浏览了许多论坛后，发现了一个非常简单的解决方案。

我使用redux形式。 Urgo映射redux-from fieldToClass。出现错误时，我导航到syncErrors列表上的第一个错误。

没有参考，也没有第三方模块。简单的querySelector和scrollIntoView

handleToScroll = (field) => {

    const fieldToClass = {
        'vehicleIdentifier': 'VehicleIdentifier',
        'locationTags': 'LocationTags',
        'photos': 'dropzoneContainer',
        'description': 'DescriptionInput',
        'clientId': 'clientId',
        'driverLanguage': 'driverLanguage',
        'deliveryName': 'deliveryName',
        'deliveryPhone': 'deliveryPhone',
        "deliveryEmail": 'deliveryEmail',
        "pickupAndReturn": "PickupAndReturn",
        "payInCash": "payInCash",
    }

document?.querySelector(`.${fieldToClasses[field]}`)
         .scrollIntoView({ behavior: "smooth" })

}

Answer 21

对我有用的东西

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>
        )
    }
}

Answer 22

对于阅读本文的其他人，他们对上述解决方案不太满意，或者只想使用简单的即插即用解决方案，则此软件包对我有用：https://www.npmjs.com/package/react-anchor-link-smooth-scroll。祝您黑客愉快！

Answer 23

使用功能组合来隐藏实现细节

反应16.8 +功能组件

useScroll钩子

以下useScroll钩子隐藏了dom的实现细节，并提供了一个简单的API。

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

  return [executeScroll, htmlElRef]
}

然后，您可以轻松滚动功能组件。

const ScrollDemo = () => {
    const [executeScroll, elementToScrollRef] = useScroll()

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

}

Click here以获得有关StackBlitz的完整演示

反应16.3 +类组件

utilizeScroll

函数组合也可以在类组件中使用。

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()
  }
  render(){
        return (
        <> 
          <div ref={this.elScroll.htmlElRef}>I wanna be seen</div> 
          <button onClick={this.elScroll.executeScroll} >Click to scroll </button> 
        </>
      )
  }
}

Click here以获得有关StackBlitz的完整演示

Answer 24

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

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

Answer 25

这个解决方案在 ReactJS 中对我有用

在 header.js 中

function scrollToTestDiv(){
      const divElement = document.getElementById('test');
      divElement.scrollIntoView({ behavior: 'smooth' });
    }

<a class="nav-link" onClick={scrollToTestDiv}> Click here! </a>

在 index.html 中

<div id="test"></div>

ReactJS如何滚动到一个元素

25 个答案: