需要帮助重构 React 组件答案

【问题标题】：Need Help Refactoring a React Component需要帮助重构 React 组件
【发布时间】：2021-07-15 21:10:56
【问题描述】：

有人可以帮我重构我正在构建的组件吗？我很难找到一种方法来为 scrollRight 设置动画。任何帮助或见解都会很棒！

https://jsfiddle.net/chrischilcoat/s9pqg2wL/7

这是我用来为 scrollRight 位置设置动画的函数。


  const scrollRight = () => {
    pager.current.scrollLeft += pager.current.clientWidth;
    setButtonState();
  };

我似乎找不到一个简单的解决方案来为过渡添加动画。

【问题讨论】：

标签： reactjs user-interface tailwind-css

【解决方案1】：

您可以使用行为平滑的滚动功能：

const scrollRight = () => {
    pager.current.scroll({
        left: pager.current.scrollLeft + pager.current.clientWidth,
        behavior: 'smooth'
    });
    setButtonState();
  };



const scrollLeft = () => {
    pager.current.scroll({
        left: pager.current.scrollLeft - pager.current.clientWidth,
        behavior: 'smooth'
    });
    setButtonState();
};

【讨论】：

【解决方案2】：

您是否在寻找平滑滚动？在这种情况下，为您的组件添加相应的样式：

.scrollbar-hide{
  scroll-behavior: smooth;
}

【讨论】：

我唯一关心的是我希望滚动条隐藏实用程序只做一件事。我想一个选项可能是让另一个类 .scroll-smooth。