当前位置：首页 > JavaScript

js实现横向滚动

2026-03-01 02:32:05JavaScript

实现横向滚动的方法

使用CSS和JavaScript结合实现横向滚动效果，可以通过监听鼠标滚轮事件或触摸事件来控制元素的水平滚动。

CSS样式设置

确保容器具有横向滚动的能力，并隐藏默认的垂直滚动条。

.scroll-container {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
}
.scroll-item {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 10px;
}

JavaScript监听滚轮事件

通过监听wheel事件，阻止默认的垂直滚动行为，改为横向滚动。

const container = document.querySelector('.scroll-container');
container.addEventListener('wheel', (e) => {
  e.preventDefault();
  container.scrollLeft += e.deltaY;
});

触摸设备支持

对于触摸设备，可以监听touchstart、touchmove和touchend事件来实现横向滑动。

let startX;
let scrollLeft;

container.addEventListener('touchstart', (e) => {
  startX = e.touches[0].pageX;
  scrollLeft = container.scrollLeft;
});

container.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const x = e.touches[0].pageX;
  const walk = (x - startX) * 2;
  container.scrollLeft = scrollLeft - walk;
});

平滑滚动动画

使用requestAnimationFrame实现平滑滚动效果，提升用户体验。

function smoothScroll(element, target, duration) {
  const start = element.scrollLeft;
  const change = target - start;
  let startTime = null;

  function animateScroll(currentTime) {
    if (!startTime) startTime = currentTime;
    const timeElapsed = currentTime - startTime;
    const progress = Math.min(timeElapsed / duration, 1);
    element.scrollLeft = start + change * progress;
    if (timeElapsed < duration) {
      requestAnimationFrame(animateScroll);
    }
  }
  requestAnimationFrame(animateScroll);
}

横向滚动按钮控制

添加左右按钮来控制横向滚动，适用于需要明确导航的场景。

const leftBtn = document.getElementById('left-btn');
const rightBtn = document.getElementById('right-btn');

leftBtn.addEventListener('click', () => {
  smoothScroll(container, container.scrollLeft - 200, 500);
});

rightBtn.addEventListener('click', () => {
  smoothScroll(container, container.scrollLeft + 200, 500);
});

响应式设计考虑

根据屏幕宽度动态调整滚动距离，确保在不同设备上都有良好的体验。

js实现横向滚动

function getScrollDistance() {
  return window.innerWidth > 768 ? 300 : 150;
}

rightBtn.addEventListener('click', () => {
  smoothScroll(container, container.scrollLeft + getScrollDistance(), 500);
});

以上方法提供了完整的横向滚动实现方案，涵盖了鼠标、触摸和按钮控制等多种交互方式。