【问题标题】: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。
      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2021-01-16
      • 2013-02-24
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多