如何修改horizontal-scroll横向滚动方向并实现无限循环滚动

问题1：调整横向滚动方向 #

你使用的horizontal-scroll库原生支持滚动方向反转配置，针对不同行独立初始化实例即可实现部分行反向、部分行正向的效果：

• 需要正向滚动的行使用默认配置初始化即可
• 需要反向滚动的行在初始化时添加reverse: true参数，示例代码如下：

const reverseScrollInstance = new HorizontalScroll({
  container: document.querySelector('.reverse-scroll-line'),
  reverse: true, // 开启反向滚动后，前滚鼠标滚轮内容会从右向左移动
  // 其余原有配置保持不变
})

如果你使用的库版本没有reverse配置项，可以替换为设置deltaMultiplier: -1，将滚动位移乘数设为负数即可实现方向反转效果。

问题2：实现横向无限滚动 #

该库没有内置无限滚动能力，你可以通过手动克隆元素+滚动位置重置的方式实现，步骤如下：

• 初始化阶段克隆当前滚动容器内的所有子元素，追加到容器末尾，保证容器总宽度至少达到视口宽度的2倍，避免滚动过程中出现空白
• 监听滚动进度事件：正向滚动的行判断滚动位移，当位移超过原始元素总宽度时，立刻将滚动位置重置为0，由于克隆元素和原始元素完全一致，用户不会感知到位置跳转
• 反向滚动的行调整判断逻辑：当滚动位移小于0时，立刻将滚动位置重置到原始元素总宽度的位置，即可实现反向的无限滚动效果

内容的提问来源于stack exchange，提问作者Shayan Kanwal