为什么翻译 div 去除溢出? [英] Why does translating div remove overflow?
问题描述
我并不完全清楚 CSS 转换如何影响文档的流布局和元素的定位.根据 MDN 和 W3C 上的文档，CSS 转换不会干扰流布局:
来自 关于 CSS 转换的 MDN(强调我的):
<块引用>通过修改坐标空间，CSS 变换会改变受影响内容的形状和位置而不会中断正常的文档流程.
因此，如果我们转换一个元素，原始流布局应该保持不变，转换的结果应该是纯粹的视觉效果.下面是一个简单的例子:
.container {背景:白色；边距:0 自动；边框:1px 纯灰色；}.堵塞 {宽度:100%；高度:100px；}.蓝色的 {背景:蓝色；}.红色的 {背景:黄色；}.转换 {变换:translateY(-200%);}<div class="block red transform"></div><div class="block blue"></div>在这个例子中，有两个 div 元素，上面的元素被垂直平移，使其不再可见.但是，流程布局保持不变，文档中没有溢出.也就是说，转换的结果是纯粹的视觉效果.
现在，考虑一个带有固定宽度包装器的页面布局，这样子元素的宽度就受包装器元素的限制.现在添加一个比包装器宽的 定位 元素并添加一个偏移量(例如 left).在足够窄"中窗口，主体溢出，我们可以水平滚动.然而，如果我们翻译相同的元素并重新居中，溢出就会消失，这意味着转换不是纯粹的视觉.
以下示例展示了这种效果.最初，不转换偏移元素.您可以尝试调整窗口大小以查看溢出，然后使用中间的按钮切换转换.
document.getElementById('toggle').addEventListener('click', function(event) {const blocks = document.querySelectorAll('.block.wide');for(let i=0;ihtml, body {背景:#ddd;}.容器 {背景:白色；最大宽度:1152px；边距:0 自动；}.内容 {边框:1px 纯灰色；}.block.wide {背景:黄色；最大宽度:1380px；宽度:100vw；位置:相对；左:50%；}.block.wide.transform {变换:translateX(-50%);}<div class="内容"><div class="block"><h1>Lorem ipsum dolor sat amet</h1><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.例外 sint occaecat cupidatat non proident，sunt in culpa qui offcia deserunt mollit anim id estlaborum.</p><p><strong>点击下面的按钮切换变换并查看溢出消失</strong></p><button id="toggle">Toggle Transform</button><div class="块宽"><h1>Lorem ipsum dolor sat amet</h1><p>Lorem ipsum dolor sat amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut Labore et dolore magna aliqua.Ut enim ad minim veniam, quis nostrud exercitation ullamco Laboris nisi ut aliquip ex ea commodo consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.例外 sint occaecat cupidatat non proident，sunt in culpa qui offcia deserunt mollit anim id estlaborum.</p>
这是符合规范的预期行为吗?偏移和转换如何相互作用?
在我的所有测试案例中，CSS 转换都达到了所需的结果.但是，我觉得我是靠运气而不是技术规格.
这里有几个要点需要介绍.
来自 CSS Transforms 规范的 3 节.变换渲染模型说:
<块引用>对于布局由 CSS 框模型控制的元素，transform 属性不会影响围绕已转换元素的内容流.但是，溢出区域的范围考虑了转换后的元素.这种行为类似于通过相对定位偏移元素时发生的情况.因此，如果溢出属性的值是滚动或自动，滚动条将根据需要出现，以查看在可见区域之外转换的内容.具体来说，转换可以扩展(但不缩小)溢出区域的大小，溢出区域的计算方法是应用转换前后元素边界的并集.
这意味着转换应该影响溢出和滚动.但是，在您的第一个示例中，溢出是负坐标空间，并且该溢出总是被剪裁，所以它不会生成任何新的滚动条.
但是你的第二个例子，直接阅读，似乎与规范相矛盾，变换缩小了溢出区域.我认为这里发生的是位置相对偏移，正如上面引用所承认的，变换是非常相似的操作，并且变换正在撤销相对定位.
换句话说，溢出区域被计算为应用相对定位和变换之前和之后元素边界的并集.
It is not entirely clear to me how CSS transforms affect the flow layout of the document and the positioning of an element. According to the documentation on MDN and W3C, CSS transforms do not interfere with the flow layout:
From MDN on CSS transforms (emphasis mine):
By modifying the coordinate space, CSS transforms change the shape and position of the affected content without disrupting the normal document flow.
Thus, if we translate an element, the original flow layout should remain intact and the result of the transformation should be purely visual. A trivial example of this is demonstrated below:
.container {
background: white;
margin: 0 auto;
border: 1px solid grey;
}
.block {
width: 100%;
height: 100px;
}
.blue {
background: blue;
}
.red {
background: yellow;
}
.transform {
transform: translateY(-200%);
}
<div class="container">
<div class="block red transform"></div>
<div class="block blue"></div>
</div>
In this example, there are two div elements and the upper element was translated vertically so that it is not visible anymore. However, the flow layout remains unchanged and there is no overflow in the document. That is, the result of the transformation is purely visual.
Now, consider a page layout with a wrapper of fixed width, such that the width of the child elements is bounded by the wrapper element. Now add a positioned element that is wider than the wrapper and add an offset (e.g. left). In "narrow enough" windows, the body overflows and we are able to scroll horizontally. However, if we translate the same element and re-center it, the overflow disappears, implying that the transformation is not purely visual.
A demonstration of this effect is shown in the example below. Initially, the offset element is not transformed. You may try resizing your window to see the overflow and then toggle the transformation with the button in the center.
document.getElementById('toggle').addEventListener('click', function(event) {
const blocks = document.querySelectorAll('.block.wide');
for(let i=0;i<blocks.length;i++) {
const block = blocks[i];
block.classList.toggle('transform');
}
});
html, body {
background: #ddd;
}
.container {
background: white;
max-width: 1152px;
margin: 0 auto;
}
.content {
border: 1px solid grey;
}
.block.wide {
background: yellow;
max-width: 1380px;
width: 100vw;
position: relative;
left: 50%;
}
.block.wide.transform {
transform: translateX(-50%);
}
<div class="container">
<div class="content">
<div class="block">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p><strong>Click the button below to toggle the transform and see the overflow vanish</strong></p>
<button id="toggle">Toggle Transform</button>
</div>
<div class="block wide">
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
</div>
Is this the intended behavior according to the specifications? How do offsets and transformations interact?
In all my test cases, the CSS transform achieves the desired result. However, I feel that I am relying on luck rather than a technical specification.
There's several points to cover here.
From the CSS Transforms spec, Section 3. The Transform Rendering Model says:
For elements whose layout is governed by the CSS box model, the transform property does not affect the flow of the content surrounding the transformed element. However, the extent of the overflow area takes into account transformed elements. This behavior is similar to what happens when elements are offset via relative positioning. Therefore, if the value of the overflow property is scroll or auto, scrollbars will appear as needed to see content that is transformed outside the visible area. Specifically, transforms can extend (but do not shrink) the size of the overflow area, which is computed as the union of the bounds of the elements before and after the application of transforms.
Which means transforms are supposed to affect the overflow and scrolling. However, in your first example, the overflow is to a negative coordinate space, and that overflow is always clipped, so it doesn't generate any new scrollbars.
But your second example, on a direct reading, seems to be in contradiction to the specification, with the transform shrinking the overflow area. What I think is happening here is that position relative shifts, and transforms are, as acknowledged by the quote above, very similar operations, and the transform is undoing the effect of the relative positioning.
In other words, the overflow area is being computed as the union of the bounds of the elements before and after the application of relative positioning and transforms.
这篇关于为什么翻译 div 去除溢出?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
