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

视口百分比长度是相对于初始包含块的大小。当初始包含块的高度或宽度改变时，它们相应地缩放。

但是，当根元素上的溢出值为auto时，任何假设滚动条不存在。

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

截面泄漏生成水平滚动

2 个答案: