1

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

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

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

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

const elementRef = useRef<HTMLDivElement>(null)

实用程序功能

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

}

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

4

1 回答 1

0

这是使用现有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>

于 2020-05-22T16:31:28.993 回答