React useRef 将平滑滚动添加到除 Internet Explorer 之外的所有浏览器都支持的 div

Question

我在实现基于 React 的 useRef 的元素的平滑滚动时遇到了麻烦，该元素可以在任何现代浏览器中运行，并且动画没有任何延迟。这似乎很难，这就是我寻求帮助的原因。

已尝试使用 scrollIntoView({ behavior: 'smooth', block: 'start' })，它在 Google Chrome 和 Firefox 中运行良好，但 Safari 可以似乎不起作用。尝试安装 polyfill (https://www.npmjs.com/package/smoothscroll-polyfill) 以支持 Safari 和其他浏览器，但在 Safari 中的 Iphone 8 上进行测试时，由于滚动动画滞后，它还不够好。

考虑创建一个名为 ScrollToElement 的实用程序函数，该函数接受元素 ref 或其他内容并尝试自己对其进行动画处理，但需要一些帮助才能开始，因为我还没有真正玩过css动画。

可以帮助我在解决这个问题的正确方向上，以便我可以顺利滚动到任何浏览器中的任何 div 吗？

const elementRef = useRef<HTMLDivElement>(null)

实用程序函数

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

}

顺便说一句，我正在做打字稿。

Answer 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/smoothscroll-polyfill@0.4.4/dist/smoothscroll.js"></script>

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