我有一个居中对齐的DIV网站。现在,有些页面需要滚动,有些不需要。当我从一个类型切换到另一个类型时,滚动条出现会让页面向侧边移动几个像素。有没有办法避免这种情况,而不需要在每个页面上明确显示滚动条?
overflow-y:scroll是正确的,但你应该将其与html标签一起使用,而不是body标签,否则在IE 7中会出现双重滚动条
所以正确的CSS应该是:
html {
overflow-y: scroll;
}
padding-left: calc(100vw - 100%);
。<body>
<div style="padding-left: calc(100vw - 100%);">
Some Content that is higher than the user's screen
</div>
</body>
100vw 表示包括滚动条在内的视口的100%。 如果您减去可用空间而不带滚动条的 100% ,则会得到滚动条的宽度或者如果不存在,则为 0 。 在左侧创建该宽度的填充将模拟第二个滚动条,将居中内容向右移回。
请注意,仅当可滚动元素使用页面的整个宽度时,才能实现此目标,但大多数情况下这应该不成问题,因为只有很少的其他情况需要居中滚动内容。
100vw
和 100%
测量的是不同的东西,所以我从中学到了有用的知识! - Nick F@media screen and (min-width: 800px) {...}
。这样可以让内容适应页面宽度。例如在小分辨率下会出现不必要的间隙,导致内容向右移动。 - MarkosyanArturhtml {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
示例。点击“更改最小高度”按钮。
使用calc(100vw - 100%)
,我们可以计算出滚动条的宽度(如果不显示则为0)。思路:使用负的右边距,我们可以增加<html>
的宽度到这个宽度。你将看到一个水平滚动条-应该使用overflow-x: hidden
隐藏。
calc(100% - 100vw)
代替乘以-1
呢? - SystemParadox我认为不需要。但是使用 overflow: scroll
属性来样式化 body
元素应该可以解决问题。虽然你好像已经知道这一点了。
padding-left: 34px;
以使我的页面居中对齐。 - Pat Migliaccio如果更改大小或加载一些数据后出现滚动条,则可以尝试以下操作,创建一个类并应用此类。
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
body {
scrollbar-gutter: stable both-edges;
}
新的CSS规范正在推出,它将有助于滚动条重新定位: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
我不知道这是否是一篇旧帖子,但我遇到了同样的问题,如果你只想垂直滚动,你应该尝试使用overflow-y:scroll
我看到三种方法 - 每种方法都有其特点:
calc(100vw - 100%)
添加间距,由 Rapti 提到。点击“切换高度”以查看内容移动。
scrollbar-gutter
这个功能支持有限,但是通过使用@support
媒体查询,我们可以结合使用overflow-y: scroll
:
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
html {
overflow-y: scroll;
}
@supports (scrollbar-gutter: stable) {
html {
overflow-y: auto;
scrollbar-gutter: stable;
}
}
@supports (overflow-y: overlay) {
html {
overflow-y: overlay;
scrollbar-gutter: auto;
}
}
可以使用负边距和overflow-x: hidden
来实现,但在某些情况下可能会隐藏重要内容,例如小屏幕、自定义字体/缩放大小、浏览器扩展等。
calc(100vw - 100%)
这可以通过RTL支持来实现:
html[dir='ltr'] main {
padding-left: calc(100vw - 100%);
}
html[dir='rtl'] main {
padding-right: calc(100vw - 100%);
}
<main>
将成为居中内容的容器。<main>
,这里的内容就不会移动。但是一旦它占据了容器的100%,就会引入填充。请参见StackBlitz演示并单击“切换宽度”。calc
解决方案。只需像这样设置容器元素的宽度即可解决问题。
width: 100vw;
html
上非常有效。 - Arbnor Lumeziwidth: 100vw
的HTML上使用以下样式:box-sizing: border-box; // 这样宽度将包括padding
,padding-right: 1.2rem; // 避免滚动条宽度
和overflow-x: hidden; // 隐藏水平滚动条
。 - Ketan Chaudhari
overflow-y: overlay
? - milkersaracoverflow-y: overlay
已经被废弃:https://developer.mozilla.org/en-US/docs/Web/CSS/overflow - drojf