求助：基于jQuery实现点击箭头横向滚动页面的方案

嘿，我来给你两种实用的实现方案，完美匹配你要的横向滚动需求👇

这种方案适合不想显示原生滚动条，纯靠箭头控制滚动的场景，步骤如下：

1. 先搞定基础样式 #

首先给承载内容的容器（比如包裹.secondclass和.to_the_right的父容器）设置横向溢出隐藏，同时让.to_the_right的ul横向排列：

/* 父容器：限制可视区域，隐藏溢出内容 */
.scroll-container {
  width: 100%;
  overflow-x: hidden;
  position: relative;
}

/* 让ul横向排列，新增li时自动扩展宽度 */
.to_the_right ul {
  display: flex;
  gap: 10px; /* 可选：li之间的间距 */
  padding: 0;
  margin: 0;
  list-style: none;
}

.to_the_right li {
  white-space: nowrap; /* 防止li内容换行 */
  padding: 8px 16px;
  border: 1px solid #eee;
}

/* 箭头按钮样式，固定在底部两侧 */
.scroll-btn {
  position: fixed;
  bottom: 20px;
  width: 40px;
  height: 40px;
  border: none;
  border-radius: 50%;
  background: #333;
  color: white;
  cursor: pointer;
  z-index: 100;
}

.scroll-btn.left {
  left: 20px;
}

.scroll-btn.right {
  right: 20px;
}

2. 用JavaScript实现点击滚动逻辑 #

监听箭头按钮的点击事件，每次点击让容器横向滚动固定距离，还能加平滑滚动效果：

const scrollContainer = document.querySelector('.scroll-container');
const leftBtn = document.querySelector('.scroll-btn.left');
const rightBtn = document.querySelector('.scroll-btn.right');
const scrollStep = 300; // 每次滚动的距离，可根据需求调整

// 向右滚动
rightBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: scrollStep,
    behavior: 'smooth' // 平滑滚动，去掉就是瞬间滚动
  });
});

// 向左滚动
leftBtn.addEventListener('click', () => {
  scrollContainer.scrollBy({
    left: -scrollStep,
    behavior: 'smooth'
  });
});

如果想保留原生滚动条，同时支持箭头控制，只需要调整CSS和JS的小部分：

1. 调整容器样式（显示原生滚动条） #

把父容器的overflow-x: hidden改成overflow-x: auto，同时可以美化一下滚动条（可选）：

.scroll-container {
  width: 100%;
  overflow-x: auto;
  position: relative;
  /* 可选：美化滚动条 */
  scrollbar-width: thin;
  scrollbar-color: #333 #eee;
}

/* 针对Chrome/Edge的滚动条美化 */
.scroll-container::-webkit-scrollbar {
  height: 6px;
}
.scroll-container::-webkit-scrollbar-track {
  background: #eee;
}
.scroll-container::-webkit-scrollbar-thumb {
  background: #333;
  border-radius: 3px;
}

2. 复用相同的JS逻辑 #

和方案一的JS代码完全一样！因为scrollBy方法同样适用于带有原生滚动条的容器，用户既可以点击箭头滚动，也可以直接拖动滚动条，完美兼顾两种交互方式。

额外提示 #

• 如果你的.secondclass图片容器也需要跟着横向滚动，记得把它也放到.scroll-container里面哦
• 滚动步长scrollStep可以根据你的li宽度和布局调整，确保每次滚动能刚好显示完整的新内容
• 平滑滚动的behavior: 'smooth'是现代浏览器都支持的，如果要兼容旧浏览器，可以去掉这个属性，或者用第三方平滑滚动库替代

内容的提问来源于stack exchange，提问作者Vladimir mans