在反应中实现平滑滚动答案

【问题标题】：Implementing smooth scrolling in react在反应中实现平滑滚动
【发布时间】：2020-07-10 03:55:28
【问题描述】：

我正在尝试为自己创建一个网站，当您单击图像时，页面将向下滚动到不同部分中的另一个元素。

我现在的代码结构是我有一个 App 类，在该类中我创建了另外两个组件，分别称为 A 和 B。

class App extends Component{
   render () { 
      return (<A/>
              <B/>)
}

用户单击的图像在组件 A 中，而我要滚动到的元素在 B 中。我尝试使用 element.scrollIntoView 函数通过创建如下引用来执行此操作：

class App extends Component{
    constructor(props){
        super(props);

        this.divToFocus = React.createRef();
    }
    

    handleOnClick = () =>{
        this.divToFocus.scrollIntoView({behavior: 'smooth'}
    }

    render () {
        return (
        <div>
            <A click={this.handleOnClick}/>
            <B name={this.divToFocus} />
        </div>)}

在 A 中使用 handleOnClick 作为 img onClick 属性（确保为样式设置 "pointer-events": "all"），然后在 B 中创建一个名为 this.divToFocus 的 div，但出现类型错误说 @ 987654328@ 不是函数。

我还尝试使用react-scroll，方法如下：

class A extends Component{
    render (){ 
        return (
        <Element name={"name"}>
            Hello world!
        </Element>
    )}
}

class B extends Component{
    render (){ 
        return (
        <Link activeClass="active" to="name" spy={true} smooth={true} offset={50} duration={500}>
          <img src={arrow} />
        </Link>
    )}
}

但是当我单击图像时没有发生任何事情。任何有关如何做到这一点的建议将不胜感激！

【问题讨论】：

标签： reactjs smooth-scrolling

【解决方案1】：

您可以使用 DOM 和 ScrollIntoView 来实现这一点。

A.js

import React from "react";

export default function A() {
  const handleImageClick = () => {
    document.getElementById("myid").scrollIntoView({ behavior: "smooth" });
  };
  return (
      <img
        onClick={handleImageClick}
        alt="placeholder"
        src="https://via.placeholder.com/728x200.png?text=Visit+WhoIsHostingThis.com+Buyers+GuideC/O https://placeholder.com/"
      />
  );
}

B.js

import React from "react";

export default function B() {
  return (
    <div id="myid">
      <h1>Hello CodeSandbox</h1>
      <h2>Some Long content for scroll to happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Start editing to see some magic happen!</h2>

    </div>
  );
}

Codesandbox 演示 here

【讨论】：