React useRef 将平滑滚动添加到 div，除了互联网探索之外的所有浏览器都支持

Question

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

尝试使用scrollIntoView({行为："平滑"，块："开始"}(，它在Google Chrome和Firefox中效果很好，但Safari似乎不起作用。尝试在 Safari 和其他浏览器中安装 polyfill (https://www.npmjs.com/package/smoothscroll-polyfill( 以支持，但是在 Safari 中的 iPhone 8 上进行测试时，由于滚动动画滞后，它不够好。

考虑创建一个名为ScrollToElement的 util 函数，它接受元素 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>