截面泄漏产生水平滚动

Question

我正在尝试创建一种从其父容器泄漏元素的方法。

我正在使用 max-width 和 margin: auto 使容器居中。

子元素有position: relative，用left + translateX transform居中

在页面开始滚动（内容高度高于屏幕高度）之前，CSS 工作正常。

这个垂直滚动也会产生水平滚动。

我可以使用 overflow-x: hidden 隐藏它，但我真的很想知道 为什么我得到水平滚动条？

也许是因为改造？下面的代码（全屏查看）：

.leaked {
  position: relative;
  left: 50%;
  transform: translatex(-50%);
  width: 100vw;
  margin: 0;
  overflow: hidden;
}

.container {
  padding: 0 20px;
  margin: 0 auto;
  max-width: 960px;
  position: relative;
}


/* EXTRA */

.block {
  padding: 20px 0;
  background: darkred;
  color: white;
}

body {
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  height: auto;
}

figcaption {
  text-align: center;
  color: gray;
  font-size: 0.8em;
}

.force-scroll {
  height: 100vh;
}

<article class="container">
  <header>
    <h1>Article title</h1>
    <small>To see in action, use and 1024px wide screen or larger</small>
  </header>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <figure class="leaked">
    <img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
    <figcaption>An example figure</figcaption>
  </figure>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
  <section class="leaked block">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
      </p>
    </div>

  </section>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
  <div class="force-scroll">This is only to force an scroll</div>
</article>

Answer 1

这是.leaked上的宽度。我将宽度从 100vw 更改为 100%，并且图像的尺寸减小了，因此它现在适合容器。

.leaked {
    width: 100%;
    //other styles
}

但是，如果您确实希望泄漏的内容全宽，您需要更改 html 结构，使 .leaked 部分不在容器内，这样它就会全宽：

<article class="container">
  <header>
    <h1>Article title</h1>
    <small>To see in action, use and 1024px wide screen or larger</small>
  </header>
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  </article>
  <figure class="leaked">
    <img src="http://via.placeholder.com/1920x800" alt="Example figure" width="1920" height="800">
    <figcaption>An example figure</figcaption>
  </figure>
  <article class="container">
  <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Enim dolore quaerat quos ex quo laborum officiis maxime molestias cum omnis. Veritatis quas, molestiae nihil soluta inventore provident minus nostrum atque!</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sint quis pariatur totam nostrum explicabo doloremque quaerat! Ipsum odit dolor ut corrupti hic quae provident voluptates saepe commodi, id culpa praesentium?</p>
  </article>
  <section class="leaked block">
    <div class="container">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut accusantium doloribus aspernatur laboriosam! Voluptatem blanditiis doloremque earum ab alias, modi repudiandae eveniet autem fugiat facilis ducimus? Veniam laboriosam nobis ab!
      </p>
    </div>
  </section>
  <article class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque voluptates voluptas eveniet suscipit fugiat. Quidem nesciunt ducimus veritatis, sed repudiandae perferendis nam fugiat! Laborum minus consequatur hic. Ut, dolorum facilis.</p>
  <div class="force-scroll">This is only to force an scroll</div>
</article>

Answer 2

根据documentation

视口百分比长度 与初始包含块的大小有关。当初始包含块的高度或宽度发生变化时，它们会相应地缩放。

However, when the value of overflow on the root element is auto, any scrollbars are assumed not to exist.

所以没有js就没有办法获得没有滚动条的宽度:(

截面泄漏产生水平滚动

Section Leak generating horizontal scroll

html

css

transform

overflow