js怎么写左右滑动时上下不动

在JavaScript中实现左右滑动时上下不动的方法，主要依靠CSS和JavaScript结合，通过监听滑动事件并防止默认的上下滑动行为。

核心观点：使用CSS来限制元素滑动、JavaScript监听touch事件、阻止默认垂直滚动行为。

通过监听touchstart和touchmove事件，可以捕获用户的滑动行为，并通过一些简单的逻辑来判断滑动方向。如果检测到用户试图进行上下滑动，则阻止默认行为，从而实现“左右滑动时上下不动”的效果。以下是详细步骤和实现代码。

一、使用CSS来限制元素滑动

在实现左右滑动时上下不动的功能时，首先需要通过CSS来限制元素的滑动方向。以下是一些关键的CSS样式：

.container {
  overflow-x: scroll;
  overflow-y: hidden; /* 禁止垂直滚动 */
  white-space: nowrap; /* 防止内容换行 */
}
.item {
  display: inline-block; /* 使子元素水平排列 */
  width: 200px; /* 每个子元素的宽度 */
  height: 100px; /* 每个子元素的高度 */
}

在上述CSS中，overflow-y: hidden用于禁止垂直滚动，white-space: nowrap和display: inline-block保证子元素水平排列。

二、JavaScript监听touch事件

接下来，通过JavaScript来监听touchstart和touchmove事件，以判断用户的滑动方向并阻止默认的垂直滚动行为。

const container = document.querySelector('.container');
let startX;
let startY;
container.addEventListener('touchstart', function(event) {
  startX = event.touches[0].pageX;
  startY = event.touches[0].pageY;
}, { passive: false });
container.addEventListener('touchmove', function(event) {
  const deltaX = event.touches[0].pageX - startX;
  const deltaY = event.touches[0].pageY - startY;
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    // 阻止垂直滚动
    event.preventDefault();
  }
}, { passive: false });

在上述代码中，通过touchstart事件记录初始的触摸位置（startX和startY），在touchmove事件中计算水平和垂直方向的滑动距离（deltaX和deltaY），如果水平滑动距离大于垂直滑动距离，则阻止默认的垂直滚动行为。

三、具体实现步骤

1、HTML结构

首先，创建一个包含多个子元素的容器：

<div class="container">
  <div class="item">Item 1</div>
  <div class="item">Item 2</div>
  <div class="item">Item 3</div>
  <!-- 更多子元素 -->
</div>

2、应用CSS样式

然后，应用前面提到的CSS样式：

.container {
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
}
.item {
  display: inline-block;
  width: 200px;
  height: 100px;
}

3、添加JavaScript代码

最后，添加前面提到的JavaScript代码来监听触摸事件：

const container = document.querySelector('.container');
let startX;
let startY;
container.addEventListener('touchstart', function(event) {
  startX = event.touches[0].pageX;
  startY = event.touches[0].pageY;
}, { passive: false });
container.addEventListener('touchmove', function(event) {
  const deltaX = event.touches[0].pageX - startX;
  const deltaY = event.touches[0].pageY - startY;
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    event.preventDefault();
  }
}, { passive: false });

通过以上步骤，就可以实现左右滑动时上下不动的效果。

四、实际应用场景

1、图片滑动展示

这种技术可以用于图片滑动展示中，通过限制垂直滚动，用户可以左右滑动查看图片而不受垂直滚动的影响。

2、水平滚动菜单

在移动端应用中，水平滚动菜单是一个常见的设计，通过这种方法可以确保菜单在左右滑动时不会触发垂直滚动。

3、滚动条隐藏与显示

在某些情况下，可能需要根据用户的操作动态隐藏或显示滚动条，可以通过监听滑动事件实现这一功能。

container.addEventListener('touchmove', function(event) {
  const deltaX = event.touches[0].pageX - startX;
  const deltaY = event.touches[0].pageY - startY;
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    container.style.overflowY = 'hidden';
    event.preventDefault();
  } else {
    container.style.overflowY = 'auto';
  }
}, { passive: false });

通过这种方式，可以实现根据用户的滑动方向动态控制滚动条的显示与隐藏。

五、优化与注意事项

1、性能优化

在处理触摸事件时，尽量避免复杂的计算和DOM操作，以提高性能。可以使用requestAnimationFrame来优化动画效果。

container.addEventListener('touchmove', function(event) {
  const deltaX = event.touches[0].pageX - startX;
  const deltaY = event.touches[0].pageY - startY;
  if (Math.abs(deltaX) > Math.abs(deltaY)) {
    requestAnimationFrame(() => {
      event.preventDefault();
    });
  }
}, { passive: false });

2、兼容性处理

触摸事件在不同浏览器中的实现可能存在差异，需要进行兼容性处理。可以使用第三方库如Hammer.js来简化触摸事件的处理。

const mc = new Hammer(container);
mc.get('pan').set({ direction: Hammer.DIRECTION_HORIZONTAL });
mc.on('pan', function(event) {
  event.preventDefault();
});

通过Hammer.js，可以更方便地处理触摸事件并确保兼容性。

六、总结

通过结合CSS和JavaScript，可以有效地实现左右滑动时上下不动的效果。 关键在于通过CSS限制垂直滚动，通过JavaScript监听触摸事件并阻止默认的垂直滚动行为。在实际应用中，可以根据具体需求进行优化和调整，以确保用户体验和性能。

使用CSS来限制元素滑动
JavaScript监听touch事件
阻止默认垂直滚动行为
实际应用场景
优化与注意事项

通过以上步骤，可以有效实现左右滑动时上下不动的效果，提升用户体验。