React中点击滚动功能实现

React中点击滚动功能实现

• 问题背景

  • 当我们在React中需要实现点击某处实现滚动到页面上某位置A的功能。

• 解决方法

  • 使用ref + getBoundingClientRect() + scrollTo

    • 使用ref获取A位置处的DOM元素实例。
    • 使用getBoundingClientRect()获取滚动到这个DOM实例的距离。（rect.bottom是DOM实例A距离viewport左上角的Y轴上的距离）。
    • 使用scrollTo({top: dis, behavior: “smooth”})完成滚动。

  • 使用a标签锚点

    const Sub: React.FC = () => {
      return (
        <>
        	<a href="#aaa"></a>
        </>
      )
    }
    

    当点击a标签的时候，页面会instant滚动到id为aaa的元素处。并且URL后面会加上锚点，www.example.com/extension#aaa

    const someComponent: React.FC = () => {
      return (
        <>
        	<div id="aaa"></div>
        </>
      )
    }
    

    即使a标签和具有对应id的DOM元素不在一个组件中也没有问题，因为不管在哪个组件中，最终这个页面中都只有一个具有对应id的DOM元素。

  • 设置平滑滚动

    • 使用CSS属性scroll-behavior

      :global{
        html{
          scroll-behavior: smooth;
        }
      }