如何使用纯JavaScript实现Div左右滚动（无需jQuery）

没问题，我帮你把jQuery实现的Div左右滚动效果转换成纯JavaScript版本，功能完全一致，还优化了一些细节让交互体验更好。下面是完整的代码和说明：

完整代码实现 #

HTML结构 #

去掉了jQuery的依赖引入，还给按钮加了箭头文字方便识别：

<div class="outer" id="content">
  <button class="lefty paddle" id="left-button">←</button>
  <div class="inner" style="background:red"></div>
  <div class="inner" style="background:green"></div>
  <div class="inner" style="background:blue"></div>
  <div class="inner" style="background:yellow"></div>
  <div class="inner" style="background:orange"></div>
  <button class="righty paddle" id="right-button">→</button>
</div>

CSS样式 #

优化了按钮的定位逻辑，确保按钮相对于容器垂直居中，还添加了基础交互样式：

.outer {
  display: flex;
  overflow-x: hidden;
  overflow-y: hidden;
  position: relative; /* 让绝对定位的按钮基于这个容器定位 */
  width: 100%; /* 确保容器占满可用宽度 */
}

.inner {
  flex: 0 0 25%;
  height: 100px;
  margin: 10px;
}

.paddle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%); /* 精准垂直居中 */
  width: 30px;
  height: 40px;
  cursor: pointer;
  border: none;
  background: rgba(0,0,0,0.2);
  color: white;
  font-size: 16px;
}

.lefty {
  left: 0;
}

.righty {
  right: 0;
}

JavaScript逻辑 #

用原生requestAnimationFrame实现了和jQuery animate一致的平滑滚动效果，还加入了缓动函数让动画更自然：

// 获取页面元素
const contentContainer = document.getElementById('content');
const scrollLeftBtn = document.getElementById('left-button');
const scrollRightBtn = document.getElementById('right-button');

// 自定义平滑滚动函数，模拟jQuery animate的效果
function smoothScroll(element, targetScrollPos, duration = 600) {
  const startScrollPos = element.scrollLeft;
  const scrollDistance = targetScrollPos - startScrollPos;
  const startTime = performance.now();

  // 动画帧回调
  function animate(currentTime) {
    const elapsedTime = currentTime - startTime;
    // 计算进度，确保不超过100%
    const progress = Math.min(elapsedTime / duration, 1);
    // 使用缓动函数，让滚动动画先慢后快再慢，和jQuery的slow效果一致
    const easeProgress = progress < 0.5 
      ? 2 * progress * progress 
      : 1 - Math.pow(-2 * progress + 2, 2) / 2;
    
    element.scrollLeft = startScrollPos + scrollDistance * easeProgress;

    // 未完成则继续请求下一帧
    if (progress < 1) {
      requestAnimationFrame(animate);
    }
  }

  requestAnimationFrame(animate);
}

// 左滚动按钮事件
scrollLeftBtn.addEventListener('click', (event) => {
  event.preventDefault();
  const targetPos = contentContainer.scrollLeft - 200;
  smoothScroll(contentContainer, targetPos);
});

// 右滚动按钮事件
scrollRightBtn.addEventListener('click', (event) => {
  event.preventDefault();
  const targetPos = contentContainer.scrollLeft + 200;
  smoothScroll(contentContainer, targetPos);
});

关键说明 #

• 无依赖：完全使用原生JavaScript实现，不需要引入任何库
• 平滑动画：用requestAnimationFrame实现高性能的平滑滚动，加入缓动函数让动画更自然，和jQuery的"slow"速度（600ms）匹配
• 优化交互：调整了按钮的垂直居中方式，添加了背景色和光标样式，提升用户体验
• 兼容性：支持所有现代浏览器，以及IE10+

内容的提问来源于stack exchange，提问作者J.Doe