React点击操作自动定位到另外一个元素

方式一

使用ScrollIntoView方法

import React from 'react'

export default class ScrollToElement extends React.Component {
    render() {
        return (
            <div>
                <button onClick={() => {
                    this.refs.targetElement.scrollIntoView()
                }}>点击定位
                </button>
                <div style={{height: '100vh', backgroundColor: 'red'}}>我的</div>
                <input ref='targetElement'/>
            </div>
        )
    }
}

它接受两种形式的值：布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动（老版）的浏览器。我们这里只说对象值。

{
  behavior: "auto" | "instant" | "smooth", // 默认 auto
  block: "start" | "center" | "end" | "nearest", // 默认 center
  inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}

对象可以有三个参数。

behavior 表示滚动方式。

1. auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 使用平滑滚动。
2. block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
3. inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是水平方向。其值与 block 类似。

方式二

使用window.scrollTo方法

import React from 'react'

export default class ScrollToElement extends React.Component {
    render() {
        return (
            <div>
                <button onClick={() => {
                    {/*this.refs.targetElement.scrollIntoView()*/}
                    window.scrollTo(0, this.refs.targetElement.offsetTop)
                }}>点击定位
                </button>
                <div style={{height: '100vh', backgroundColor: 'red'}}>我的</div>
                <input ref='targetElement'/>
            </div>
        )
    }
}