滑动画廊桌面/移动端显示异常，移动端横向滚动无法解决求助

• 针对性设置overflow属性：别给画廊全局加overflow: unset;，改用媒体查询区分桌面和移动端，精准控制不同设备的表现：

  /* 桌面端（屏幕宽度大于768px时生效） */
  @media (min-width: 768px) {
    .你的画廊类名 {
      overflow: unset;
    }
  }
  /* 移动端保持原有约束，避免横向溢出 */
  @media (max-width: 767px) {
    .你的画廊类名 {
      overflow: hidden; /* 或者画廊原本的默认overflow值 */
    }
  }
  

  这样既解决了桌面端画廊宽度被压缩的问题，又不会破坏移动端的布局限制。

• 排查横向滚动的根源：如果上面的设置后还是有横向滚动，用浏览器调试工具（F12）的移动端模式定位问题元素：

  • 检查画廊内部元素有没有设置width: 100vw或者固定宽度超出屏幕的情况，移动端换成width: 100%。
  • 查看是否有元素设置了position: absolute且未限制左右范围，导致超出视口。
  • 给超出视口的元素直接添加max-width: 100%，强制它不超过屏幕宽度。

• 修复body横向滚动不生效的问题：单独给body加overflow-x: hidden没用的话，试试同时给html和body设置：

  html, body {
    overflow-x: hidden;
    width: 100%;
    position: relative;
  }
  

  有时候html的宽度未限制会导致body的overflow设置不生效。

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