滚动条滚动到指定位置

问题描述

在一个div中，里面包含一个ul，div有滚动条，超出div部分的时候需要滚动滚动条才能显示，这个时候如果我要使滚动条滚动到ul中指定的元素位置，应该怎么做？

问题解决

使用scrollIntoView()方法。

参数：

• behavior 属性指定滚动的行为类型
  • auto：瞬间完成滚动，无动画效果。
  • smooth：平滑滚动，具有动画效果。

如下示例所示：

import React, { useRef } from 'react'; 
const MyComponent = () => { 
    const divRef = useRef(null); 
    const handleClick = () => { 
        const divElement = divRef.current; 
        const elementToScroll = divElement.querySelector('.scroll-to-element');
        elementToScroll.scrollIntoView({ behavior: 'smooth' }); 
    }; 
    return ( 
        <div ref={divRef} style={{ overflow: 'auto', height: '200px' }}> 
            <ul> 
                <li>列表项1</li> 
                <li>列表项2</li> 
                <li>列表项3</li> 
                <li className="scroll-to-element" onClick={handleClick}> 点击滚动到这个元素 </li> 
                <li>列表项5</li> 
                <li>列表项6</li> 
                {/* 其他列表项 */} 
            </ul> 
        </div> ); 
};