我有一个中心对齐的DIV网站.现在,有些页面需要滚动,有些则不需要.当我从一种类型移动到另一种类型时,滚动条的外观会将页面移动几个像素到一侧.如果没有在每个页面上明确显示滚动条,有没有办法避免这种情况？
Rub*_*ben 248
overflow-y:滚动是正确的,但你应该使用它与html标签,而不是身体,否则你在IE 7中得到一个双滚动条
所以正确的CSS将是:
html {
overflow-y: scroll;
}
Rap*_*pti 50
我有同样的问题,但我有一个好主意:将可滚动元素的内容包装成div并应用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如果它不存在.在左侧创建该宽度的填充将模拟第二个滚动条,将居中内容向右移动.
请注意,这仅在可滚动元素使用页面的整个宽度时才有效,但这在大多数情况下应该没有问题,因为只有少数其他情况下您有可居中的可滚动内容.
Mic*_*ker 43
我想不是.但是造型body与overflow: scroll应该做的.但你似乎知道这一点.
Moe*_*sio 34
随着滚动始终显示,可能不适合布局.
尝试用css3限制体宽
body {
width: calc(100vw - 34px);
}
vw是视口的宽度(请参阅此链接以获得一些解释)
calccss3中的计算
34px代表双滚动条宽度(请参阅此内容以了解固定或如果您不相信固定尺寸,则计算此值)
pon*_*ngo 24
html {
overflow-x: hidden;
margin-right: calc(-1 * (100vw - 100%));
}
例子.单击"更改最小高度"按钮.
与calc(100vw - 100%)我们可以计算出滚动条的宽度(如果未显示,这将是0).想法:使用负边距,我们可以增加宽度<html>到这个宽度.您将看到一个水平滚动条 - 它应该被隐藏使用overflow-x: hidden.
Mar*_* T. 17
body {
scrollbar-gutter: stable both-edges;
}
新的 css 规范将有助于滚动条重新定位： https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-gutter
Bja*_*ted 13
我看到了三种方法 - 每种方法都有自己的怪癖：
按“切换高度”即可查看内容的变化。
滚动条装订线
这支持有限，但通过@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但这在某些情况下有隐藏重要内容的风险。小屏幕、自定义字体/缩放大小、浏览器扩展等。
计算(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 演示并单击“切换宽度”。
此解决方案的“问题”是，您需要媒体查询来防止“小屏幕”上的填充，并且即使在小屏幕上（当滚动条应该可见时）也会发生一些移动，因为没有空间容纳 100% 的内容和滚动条。
结论
使用滚动条装订线或者与覆盖相结合。如果您绝对不想要空白，请尝试calc使用媒体查询的解决方案。
小智 11
如果更改大小或加载一些数据后,它会添加滚动条,然后您可以尝试跟随,创建类并应用此类.
.auto-scroll {
overflow-y: overlay;
overflow-x: overlay;
}
@kashesandr 的解决方案对我有用，但为了隐藏水平滚动条，我为正文添加了另一种样式。这是完整的解决方案：
CSS
<style>
/* prevent layout shifting and hide horizontal scroll */
html {
width: 100vw;
}
body {
overflow-x: hidden;
}
</style>
JS
$(function(){
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
}
});
});
仅 JS 解决方案（当从第一个模式打开第二个模式时）：
/**
* For multiple modals.
* Enables scrolling of 1st modal when 2nd modal is closed.
*/
$('.modal').on('hidden.bs.modal', function (event) {
if ($('.modal:visible').length) {
$('body').addClass('modal-open');
$('body').css('padding-right', 17);
}
});