// 方案一

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 Left</button>
      <button onClick={scrollRight}>Scroll Right</button>
      <div
        ref={scrollContainerRef}
        className="scroll-container"
        onScroll={(e) => setScrollPosition(e.target.scrollLeft)}
      >
        {/* Your content here */}
        <div style={{ width: '3000px', height: '100px' }}>
          Long content to enable scrolling
        </div>
      </div>
    </div>
  );
}
 
export default App;

// 方案二

import React, { useRef, useState } from 'react';
import './App.css';
 
function App() {
  const scrollContainerRef = useRef(null);
  const [scrollLeft, setScrollLeft] = useState(0);
 
  const handleScrollLeft = (direction) => {
    const container = scrollContainerRef.current;
    if (container) {
      const newScrollLeft = container.scrollLeft + (direction === 'left' ? -100 : 100);
      setScrollLeft(newScrollLeft);
      container.scrollTo({
        left: newScrollLeft,
        behavior: 'smooth'
      });
    }
  };
 
  return (
    <div className="App">
      <div
        ref={scrollContainerRef}
        style={{ overflowX: 'auto', whiteSpace: 'nowrap', width: '300px' }}
      >
        <div style={{ width: '1000px', height: '50px' }}>
          这里是可以滚动的内容...
        </div>
      </div>
      <button onClick={() => handleScrollLeft('left')}>向左滑动</button>
      <button onClick={() => handleScrollLeft('right')}>向右滑动</button>
    </div>
  );
}
 
export default App;