无法在单击时滚动元素，请在React中使用useRef

Question

代码：

const scrollRef = useRef<HTMLDivElement | null>(null);
const onClickScroll = (scrollOffset: number) => {
  scrollRef!.current!.scrollLeft += scrollOffset;
};

构成部分：

<span className="flex">
 <ChevronLeftIcon className="h-5 w-5 text-white cursor-pointer" onClick={()=> onClickScroll(-20)}/>
 <ChevronRightIcon className="h-5 w-5 text-white cursor-pointer" onClick={() => onClickScroll(20)}/>
</span>

可滚动组件：

<div className="flex mt-5 w-[80rem] overflow-scroll overflow-y-clip scrollbar-hide" ref={scrollRef}>Somecode</div>

onClickScroll应该触发滚动，但不会发生。

Answer 1

您应该调用scrollTo()方法，而不是尝试更改属性。试着这样做：

const onClickScroll = (scrollOffset: number) => {
  scrollRef!.current!.scrollTo(scrollOffset, 0);
};