useRef 辅助函数行为 'smooth'

Question

我正在尝试创建一个可以在我的 React 应用程序中使用的辅助函数，但行为 'smooth' 似乎不起作用。

const scrollRef = useRef()

const handleScroll = (ref) => {
return ref.current.scrollTo({ left: ref.current.scrollLeft -= 500, behavior: 'smooth' })
}

handleScroll(scrollRef)

正在滚动到该位置，但不流畅。如果我不使用这个辅助函数，它就可以正常工作。你有什么想法如何使这项工作？

Answer 1

只是为了确定您是如何使用它的，运行函数是针对点击事件还是其他？

下面的代码片段工作正常。

import { useRef } from "react";

export default function App() {
  const scrollRef = useRef(null);

  const handleScroll = (ref) => {
    if (ref.current) {
      return window.scrollTo({ left: ref.current.scrollLeft -= 500, behavior: 'smooth' })
    }
  }
  return (
    <div style={{ height: '300vh', width: '200vw' }} onClick={() => handleScroll(scrollRef)}>
      <div ref={scrollRef} style={{ height: '100vh', width: '150vw', background: 'black' }}></div>
      <div style={{ height: '100vh', width: '150vw', background: 'green' }}></div>
    </div>
  );
}

您使用它的方式不同吗？

Answer 2

您可以通过添加一个小 CSS 样式来添加平滑的滚动行为。

.your-element-class {
  scroll-behavior: smooth
}

useRef 辅助函数行为 'smooth'

useRef helper function behavior 'smooth'

javascript

scroll

reactjs

react-hooks

use-ref