当由于ajax内容出现滚动条时,如何防止页面主体被“推”到左侧?我当然可以设置溢出:滚动到正文,但它看起来不太好。
我正在使用引导程序,但我想这是一个普遍的问题。
当由于ajax内容出现滚动条时,如何防止页面主体被“推”到左侧?我当然可以设置溢出:滚动到正文,但它看起来不太好。
我正在使用引导程序,但我想这是一个普遍的问题。
overflow: overlay
基于avrahamcool 的回答,您可以使用该属性overflow: overlay
。
行为与 相同
auto
,但滚动条绘制在内容之上而不是占用空间。仅在基于 WebKit(例如,Safari)和基于 Blink(例如,Chrome 或 Opera)的浏览器中受支持。
来源:MDN
当您需要水平滚动内容并且不希望它在滚动条出现在悬停时改变大小时,这非常有用。
警告:它已被弃用。支持几乎仅限于 Chromium,但将来可能会消失。请参阅https://caniuse.com/css-overflow-overlay。
但是,您可以回退auto
:
.container:hover {
overflow: auto; /* fallback */
overflow: overlay;
}
Can I Use 还有一个有趣的注释:
该值已被弃用,相关功能被标准化为
scrollbar-gutter
属性。
overflow: overlay
但是,您应该检查他们的链接,因为截至 2021 年 11 月,浏览器对此实验性功能的支持并不好。
好吧,滚动条总是会把你的内容推到一边,你真的无能为力。您可以做的是始终显示到滚动条,例如:
html,body {
height:101%;
}
或者
html {
overflow-y: scroll;
}
最好的方法是将值“覆盖”分配给溢出属性。这工作正常。
overflow-y: overlay;
就我而言,每当滚动条出现时,我的导航栏上都会出现一个烦人的弹出事件,但应用固定在我的导航上的位置为我解决了这个问题。