仅针对某些容器而不是整个页面在移动设备上水平滚动

Question

我需要一些卡片水平滚动，但页面的其余部分为移动设备垂直滚动（稍后将在移动应用中实现）。当我使用移动版本的开发工具时，一切似乎都正常。但是当我在手机上打开时，所有东西都会水平滚动，而不仅仅是容器。这是示例： https://codepen.io/Ilima/pen/EdYYZP 我怎样才能做到这一点？

*{
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.scroll {
  padding: 20px;
  height: 240px;
  width:calc(100% -5px);
  background-color: #fff;
  white-space: nowrap;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.block {
  width: 200px;
  height: 200px;
  background: #ccc;
  display: inline-block;
  margin: 0 20px;
  box-shadow: 0px 3px 4px rgba(0, 0, 0, 0.2), 0 2px 6px rgba(0, 0, 0, 0.2);
  
}
.test {
  background: #EEEEEE;
  height: 1000px;
  overflow-x: hidden;
  width: 100%;
}
.test p {
  display: block;
  margin: 40px;
}

<div class="scroll">
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
  <div class="block"></div>
</div>

<div class="test">
  <p style="overflow-y: auto;">This should not scroll horizontally on mobile</p>
</div>

Answer 1

你离得太近了。滚动容器的宽度会影响移动设备上 body 的整体宽度。因为.scroll 有一个百分比宽度，这意味着它是相对于父宽度的。

您要做的是确保 html/body 的宽度不超过视口宽度。

html,
body {
  width: 100vw;
}

添加这将确保主体不超过视口的宽度，然后滚动应该可以在移动设备上正常工作。您还可以在.scroll 容器上设置width: 100vw;，它也会按预期工作。由于这将用于移动设备，因此您最好设置 html/body。