移动端移除水平滚动：背景图启动页横向滚动问题求助

针对移动端启动页因固定宽度导致横向滚动的问题，以下是几个可行方案：

方案一：优化CSS布局（推荐） #

放弃固定宽度+绝对定位的方式，改用自适应宽度配合flex居中，从根源避免溢出：

/* 启动页容器 */
.splash {
  width: 100vw; /* 移动端占满视口宽度 */
  max-width: 1500px; /* 桌面端最大宽度限制为1500px */
  height: 100vh;
  margin: 0 auto; /* 桌面端水平居中 */
  background: url(你的背景图地址) no-repeat center center;
  background-size: cover;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  position: relative;
}

/* Logo样式 */
.logo {
  /* 移除原有的绝对定位、left/top/margin等属性 */
  width: 200px; /* 你的Logo宽度 */
  height: auto;
}

优点：纯CSS实现，无需JS，适配所有设备，布局更符合响应式规范。

方案二：JS强制禁止横向滚动 #

针对移动端浏览器忽略overflow-x: hidden的问题，通过JS直接控制页面滚动行为：

function fixHorizontalScroll() {
  const viewportWidth = window.innerWidth;
  if (viewportWidth < 1500) {
    // 同时给html和body设置横向隐藏
    document.documentElement.style.overflowX = 'hidden';
    document.body.style.overflowX = 'hidden';
    // 阻止触摸横向滑动事件
    document.addEventListener('touchmove', function(e) {
      const touch = e.touches[0];
      // 当触摸点超出视口左右边界时，阻止默认滚动行为
      if (touch.clientX <= 0 || touch.clientX >= viewportWidth) {
        e.preventDefault();
      }
    }, { passive: false });
  } else {
    // 桌面端恢复默认设置
    document.documentElement.style.overflowX = '';
    document.body.style.overflowX = '';
  }
}

// 页面加载和窗口 resize 时触发
window.addEventListener('load', fixHorizontalScroll);
window.addEventListener('resize', fixHorizontalScroll);

优点：无需修改现有布局，适合无法调整原有CSS的场景；缺点：依赖JS，需要处理触摸事件兼容性。

方案三：CSS裁剪超出部分 #

利用clip-path属性裁剪容器超出视口的区域，替代overflow：

.splash {
  width: 1500px;
  height: 100vh;
  position: relative;
  background: url(你的背景图地址) no-repeat center center;
  margin: 0 auto;
  /* 裁剪掉元素超出父容器的部分（这里父容器是视口） */
  clip-path: inset(0 0 0 0);
}

/* 移动端适配 */
@media (max-width: 1499px) {
  .splash {
    width: 100vw;
    clip-path: none;
  }
}

优点：纯CSS实现，无需JS；缺点：部分旧版移动端浏览器对clip-path支持有限。

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