移动端禁用垂直滚动（保留水平滚动）方案咨询

我帮你分析下这个问题哈，移动端出现能向下滚动看到空白黑底的情况，主要是页面整体高度超出了视口范围，或者触摸滑动时触发了浏览器默认的垂直滚动行为。给你两个层面的解决方案，结合起来用基本就能彻底解决：

一、CSS层面：锁定页面垂直方向，只允许水平容器滚动 #

首先通过CSS把整个页面的垂直滚动锁定，然后给你的水平时间线容器单独开启水平滚动：

/* 锁定html和body的垂直滚动，确保高度刚好填满视口 */
html, body {
  height: 100vh;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* 针对你的水平时间线容器（根据实际类名调整） */
.timeline-container {
  height: 100vh;
  overflow-x: auto; /* 允许水平滚动 */
  overflow-y: hidden; /* 禁止垂直滚动 */
  white-space: nowrap; /* 如果是内联/行内块元素布局，需要这个来保持水平排列 */
  /* 可选：隐藏滚动条，让界面更简洁 */
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* 兼容webkit内核浏览器的滚动条隐藏 */
.timeline-container::-webkit-scrollbar {
  display: none;
}

二、JS层面：阻止垂直方向的触摸滑动行为 #

有时候单纯靠CSS可能不够，因为移动端触摸滑动会触发浏览器的默认滚动，所以需要通过JS判断滑动方向，只允许水平滑动，阻止垂直滑动的默认行为：

// 获取你的水平时间线容器（替换成实际的选择器）
const timelineContainer = document.querySelector('.timeline-container');

// 记录触摸起始位置
timelineContainer.addEventListener('touchstart', function(e) {
  this.startX = e.touches[0].clientX;
  this.startY = e.touches[0].clientY;
});

// 处理触摸滑动事件
timelineContainer.addEventListener('touchmove', function(e) {
  // 如果没有记录起始位置，直接返回
  if (!this.startX || !this.startY) return;
  
  // 计算滑动的水平和垂直差值
  const diffX = e.touches[0].clientX - this.startX;
  const diffY = e.touches[0].clientY - this.startY;
  
  // 如果垂直滑动的幅度大于水平滑动，阻止默认行为（即禁止上下滚动）
  if (Math.abs(diffY) > Math.abs(diffX)) {
    e.preventDefault();
  }
  
  // 更新起始位置，避免连续滑动时判断出错
  this.startX = e.touches[0].clientX;
  this.startY = e.touches[0].clientY;
});

额外注意事项 #

• 请确保你的水平容器类名和代码里的.timeline-container一致，要是不一样记得替换成实际的选择器。
• 检查页面里其他元素是否有额外的margin或padding导致容器高度超出视口，有的话要调整掉。
• 如果页面里有输入框等需要垂直交互的元素，记得在JS里添加判断，避免阻止这些元素的默认行为（比如可以通过判断目标元素的标签名或类名来跳过阻止）。

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