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

Posted 2023-02-25

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

【英文标题】：React useRef add smooth scrolling to div that all browser except internet explore supports

【发布时间】：2020-05-22 15:54:31

【问题描述】：

我在实现基于 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) => 

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

【问题讨论】：

我在我的portfolio website 中使用了smoothscroll-polyfill，如果它滞后，你能玩一下导航吗？如果是，那我也得改一下。

【参考方案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>

【讨论】：

但这不是我要的吗？使用此技术时遇到问题，因为它在 ios 设备上不流畅

Perhaps you need also this css webkit trick