禁用水平滚动而不隐藏溢出

Question

我已经创建了我的网页结构，它由一个 header 和 7 个 div 组成，全部带有 width:100vw。所有元素都有 margin:0 和 box-sizing:borden-box.

是否可以在不使用 overflow-x:hidden 的情况下禁用水平滚动？

我将post下面的相关代码部分，如果你想看整个文档，请询问。

HTML:

<body>
        <header id="nav">
            <ul>
              <li><a href="#">Circle</a></li>
              <li><a href="#">Square</a></li>
              <li><a href="#">Line</a></li>
            </ul>
        </header>

        <div id="p5_banner" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_circle" class="p5_container"></div>

        <div class="arrow"></div>       
        <div id="p5_square" class="p5_container"></div>

        <div class="arrow"></div>
        <div id="p5_line" class="p5_container"></div>
</body>

CSS:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width:100vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
}

#nav {
    height:100px;
    width:100vw;
    padding: 0 2vw;
    font-weight: 700;
}

.p5_container {
    width: 100vw;
    height: calc(100vh - 100px - 150px);
    background-color: beige;
}

.arrow {
    width: 100vw;
    height: 150px;
    background-color: #6195B2;
}

如果之前已经解决过这个问题，我深表歉意，我能找到的所有答案都涉及溢出属性或元素超过视口 100% 的错误。

谢谢。

Answer 1

只需删除您指定的所有宽度，因为这是块元素占用 100% 宽度的默认行为。需要注意的是 100vh 不等于 100%。第一个包括滚动条的计算：

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width: 100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height: 100px;
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container {
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {
  height: 150px;
  background-color: #6195B2;
}

<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>

  <div id="p5_banner" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>

  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Answer 2

将 max-width:100%; 和 width:100vw 交给 * class。

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  max-width:100%;
  width:100vw;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
}

#nav {
  height:100px; 
  padding: 0 2vw;
  font-weight: 700;
}

.p5_container { 
  height: calc(100vh - 100px - 150px);
  background-color: beige;
}

.arrow {  
  height: 150px;
  background-color: #6195B2;
}

<body>
  <header id="nav">
    <ul>
      <li><a href="#">Circle</a></li>
      <li><a href="#">Square</a></li>
      <li><a href="#">Line</a></li>
    </ul>
  </header>
  <div id="p5_banner" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_circle" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_square" class="p5_container"></div>
  <div class="arrow"></div>
  <div id="p5_line" class="p5_container"></div>
</body>

Answer 3

你应该使用 % 而不是 vw，因为 vw 需要完整的浏览器视口的宽度。此页面还有一个 垂直滚动条 。这就是为什么 100vw 宽度不减去右侧滚动条的宽度并显示水平滚动的原因。而是使用：

width: 100vw;

如果你想真正删除水平滚动然后使用：

width: 100%;

禁用水平滚动而不隐藏溢出

Disable horizontal scrolling without overflow hidden

css

horizontal-scrolling