javascript - React useRef 为 div 添加平滑滚动效果，所有浏览器支持，除了 Internet Explorer

我在实现基于 React 的 useRef 的元素平滑滚动时遇到了困难，我希望它能在任何现代浏览器中工作而动画没有任何滞后。这似乎很难，所以我才来寻求帮助。

已经尝试使用 scrollIntoView({ behavior: 'smooth', block: 'start' })，在 Google Chrome 和 Firefox 中效果很好，但 Safari 似乎无法正常工作。尝试安装一个 polyfill（https://www.npmjs.com/package/smoothscroll-polyfill）以支持 Safari 和其他浏览器，但在 iPhone 8 的 Safari 上测试时，滚动动画依然不够流畅，因为有延迟。

考虑创建一个名为 ScrollToElement 的工具函数，它接受一个元素引用或其他内容，并尝试自己进行动画，但希望有人能帮助我入门，因为我并没有真正玩过太多 CSS 动画。

有人能在解决这个问题上给我指点正确的方向吗，这样我就可以平滑地滚动到任何在任何浏览器中都有效的 div？

const elementRef = useRef<HTMLDivElement>(null)

工具函数

export const scrollToElement = (element: HTMLDivElement) => {

}

顺便说一下，我在做 TypeScript。

答案＃1

以下是如何使用现有的 smoothscroll-polyfill 和 useRef 钩子来实现它的方法

const {
  useRef
} = React;

const App = () => {
  const elementRef = useRef(null);
  
  const onClick = () => {
    elementRef.current.scrollIntoView({behavior: 'smooth'});
  }

  return <div className = "container">
    <button className="button" onClick = {onClick}>Scroll down</button>
    <div className = "content">
      <div ref={elementRef}>Element</div>
    </div>
  </div>
}

ReactDOM.render( <
  App / > ,
  document.getElementById('root')
);

.content {
  height: 800px;
  background: #00000033;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

<script>
window.__forceSmoothScrollPolyfill__ = true;
</script>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script src="https://unpkg.com/[email /dist/smoothscroll.js"></script>

<div id="root"></div>