代码之家 › 专栏 › 技术社区 › Maxwell s.c robertklep

截面泄漏生成水平滚动

transform overflow css html

Maxwell s.c robertklep · 技术社区 · 8 年前

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

我正在使用 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>

2 回复 | 直到 8 年前

Xopoc 8 年前

根据 documentation

这个 视口百分比长度 相对于初始包含块的大小。当初始包含块的高度或宽度更改时,它们将相应地缩放。

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

因此,没有js就无法获得没有滚动条的宽度:(

Liam Kenneth 8 年前

这是上面的宽度。泄漏。我将宽度从 100vw 到 100% 图像尺寸缩小,因此现在可以放入容器中。

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

但是如果你真的想让泄露的内容全方位传播,你需要改变你的html结构。泄漏的部分不在容器内,这样它就会全宽:

<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>