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

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

你是如此接近。滚动容器的宽度会影响移动端主体的整体宽度。因为 .scroll 有一个百分比宽度，这意味着它是相对于父宽度的。

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

html,
body {
  width: 100vw;
}

添加它将确保正文不超过视口(viewport)的宽度，然后滚动应该如您在移动设备上所期望的那样工作。您还可以在 .scroll 容器上设置 width: 100vw;，它也会按预期工作。由于这是移动设备，您最好设置 html/body。