在react内,如何实现点击某按钮后div盒子内的横向滚动条向左或向右滑动

怕冷的火焰（~杰）

已于 2024-07-11 16:05:25 修改

阅读量422

点赞数 2

CC 4.0 BY-SA版权

分类专栏：滚动文章标签： javascript

于 2024-07-11 16:03:41 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_50236973/article/details/140354714

// 方案一

import React, { useRef, useState } from 'react';
import './App.css';
 
function App() {
  const scrollContainerRef = useRef(null);
  const [scrollPosition, setScrollPosition] = useState(0);
 
  const scrollLeft = () => {
    const container = scrollContainerRef.current;
    if (container) {
      const maxScroll = container.scrollWidth - container.clientWidth;
      const newPosition = Math.max(0, scrollPosition - 100); // 滑动量，可以根据需要调整
      setScrollPosition(newPosition);
      container.scrollLeft = newPosition;
    }
  };
 
  const scrollRight = () => {
    const container = scrollContainerRef.current;
    if (container) {
      const maxScroll = container.scrollWidth - container.clientWidth;
      const newPosition = Math.min(maxScroll, scrollPosition + 100); // 滑动量，可以根据需要调整
      setScrollPosition(newPosition);
      container.scrollLeft = newPosition;
    }
  };
 
  return (
    <div className="App">
      <button onClick={scrollLeft}>Scroll L