部分泄漏生成水平滚动 [英] Section Leak generating horizontal scroll

问题描述

我正在使用 max-width

我试图创建一种方法来从它的父容器中泄漏元素。 code>和 margin：auto ，以便容器居中。

子元素包含 position：relative ，并使用 left + translateX transform


CSS工作正常，直到页面滚动（内容高度高于屏幕高度）。

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

我可以使用 overflow-x隐藏它：hidden 但我真的很想知道为什么我会得到一个横向滚动？

也许是因为转换？ CODE BELOW（全屏查看）：

.leaked {position：relative;剩下：50％; transform：translatex（-50％）;宽度：100vw;保证金：0; overflow：hidden;}。container {padding：0 20px;保证金：0汽车;最大宽度：960px; position：relative;} / * EXTRA * /。block {padding：20px 0;背景：黑暗; color：white;} body {-webkit-font-smoothing：antialiased;} img {max-width：100％; height：auto;} figcaption {text-align：center;颜色：灰色; font-size：0.8em;}。force-scroll {height：100vh;}

 < article class =container> <报头GT; < h1>文章标题< / h1> < small>要在动作中看到，请使用1024像素或更大的屏幕< / small> < /报头> < p> Lorem，ipsum dolor sit amet consectetur adipisicing elit。 Enim dolore quaerat quos ex quo laborum officiis maxime molestias and omnis。 Veritatis quas，molestiae nihil soluta inventore provident minus nostrum atque！< / p> < figure class =泄漏> < img src =http://via.placeholder.com/1920x800alt =示例图width =1920height =800> < figcaption>一个示例图< / figcaption> < /数字> < p> Lorem，ipsum dolor sit amet consectetur adipisicing elit。 Enim dolore quaerat quos ex quo laborum officiis maxime molestias and 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 =泄漏块> < div class =container> < p为H. Lorem ipsum dolor坐在amet consectetur adipisicing elit。 Ut accusantium doloribus aspernatur laboriosam！ Voluptatem blanditiis doloremque earum ab alias，modi repudiandae eveniet autem fujiat facilis ducimus？ Veniam laboriosam nobis ab！ < / p为H. < / DIV> < /节> < p> Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Doloremque使得voluptas eveniet suscipit fugiat变得容易。 Quidem nesciunt ducimus veritatis，sed repudiandae perferendis nam fugiat！ Laborum减去自己的推理。 Ut，dolorum facilis。< / p> < div class =force-scroll>这只是强制滚动< / div>< / article> 

根据 -relative-lengthsrel =nofollow noreferrer>文档

视口 - 百分比长度是相对于最初的包含块。当初始包含块的高度或宽度发生变化时，它们相应地进行缩放。
$ b

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

所以没有办法没有js没有滚动条获得宽度：（$ / b>

I'm trying to create a way to leak an element from it's parent container.

I'm using max-width and margin: auto for the container to center.

The child element has position: relative and uses left + translateX transform to become centered.

The CSS works OK until the page gets scrolling (content height higher than screen height).

This vertical scroll also generates horizontal scrolling.

I was able to hide it using overflow-x: hidden but i really want to know why i'm getting an horizontal scroll?

Maybe is because the transform? CODE BELOW (see in fullscreen):

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

解决方案

According to documentation

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they have scaled accordingly.

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

So there is no way to without js to get width without scrollbars :(

这篇关于部分泄漏生成水平滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！