当滚动条由于 AJAX 内容而出现时,如何防止页面主体被“推”到左边?我当然可以设置溢出:滚动到主体,但它看起来不太好。我正在使用bootstrap,但我想这是一个一般性的问题。
khbbv19g1#
overflow: overlay
在avrahamcool's answer上构建,可以使用属性overflow: overlay。行为与auto相同,但滚动条绘制在内容顶部,而不是占用空间。仅支持基于WebKit(例如Safari)和基于Blink(例如Chrome或Opera)的浏览器。资料来源:MDN当你需要水平滚动的内容,并且不希望滚动条在悬停时改变大小时,这是非常好的。
auto
**警告:**已弃用。支持几乎仅限于Chromium,但未来可能会消失。参见https://caniuse.com/css-overflow-overlay。
但是,您可以执行auto的回退:
.container:hover { overflow: auto; /* fallback */ overflow: overlay; }
演示:jsfiddle.net/NKJRZ/385/Can I Use还有一个有趣的注解:此值已弃用,相关功能已标准化为the scrollbar-gutter property。但是,您应该检查他们的链接,因为截至2021年11月,浏览器对该实验性功能的支持并不比overflow: overlay更好。
scrollbar-gutter
9rnv2umw2#
您可以创建一个具有固定宽度的容器,并为内容提供相同的宽度(相同的静态宽度-而不是100%)。这样,当内容溢出父内容时,滚动将不推动内容,而是在其上方流动。使用它,你可以应用一种很酷的方式来滚动,而不需要推动任何东西。通过仅在悬停容器时显示滚动条。看看这个简单的Demo编辑:Here我显示了设置静态宽度和%之间的差异。
100%
bf1o4zei3#
好吧,滚动条总是会把你的内容推到一边,你对此真的无能为力。你可以做的是总是显示到滚动条,例如:
html,body { height:101%; }
或者是
html { overflow-y: scroll; }
lqfhib0f4#
最好的方法是给overflow属性赋值“overlay”。这个很好用。
overflow-y: overlay;
yk9xbfzb5#
在我的例子中,每当滚动条出现时,我的导航栏上就会出现一个恼人的弹出事件,但在我的导航上应用固定位置为我解决了这个问题。
dphi5xsq6#
在2023年有一个scrollbar-gutter属性。scrollbar-gutter: stable;就可以了。支持除Opera以外的所有浏览器。
scrollbar-gutter: stable;
6条答案
按热度按时间khbbv19g1#
overflow: overlay
在avrahamcool's answer上构建,可以使用属性
overflow: overlay
。行为与
auto
相同,但滚动条绘制在内容顶部,而不是占用空间。仅支持基于WebKit(例如Safari)和基于Blink(例如Chrome或Opera)的浏览器。资料来源:MDN
当你需要水平滚动的内容,并且不希望滚动条在悬停时改变大小时,这是非常好的。
**警告:**已弃用。支持几乎仅限于Chromium,但未来可能会消失。参见https://caniuse.com/css-overflow-overlay。
但是,您可以执行
auto
的回退:演示:jsfiddle.net/NKJRZ/385/
Can I Use还有一个有趣的注解:
此值已弃用,相关功能已标准化为the
scrollbar-gutter
property。但是,您应该检查他们的链接,因为截至2021年11月,浏览器对该实验性功能的支持并不比
overflow: overlay
更好。9rnv2umw2#
您可以创建一个具有固定宽度的容器,并为内容提供相同的宽度(相同的静态宽度-而不是
100%
)。这样,当内容溢出父内容时,滚动将不推动内容,而是在其上方流动。使用它,你可以应用一种很酷的方式来滚动,而不需要推动任何东西。通过仅在悬停容器时显示滚动条。
看看这个简单的Demo
编辑:Here我显示了设置静态宽度和%之间的差异。
bf1o4zei3#
好吧,滚动条总是会把你的内容推到一边,你对此真的无能为力。你可以做的是总是显示到滚动条,例如:
或者是
lqfhib0f4#
最好的方法是给overflow属性赋值“overlay”。这个很好用。
yk9xbfzb5#
在我的例子中,每当滚动条出现时,我的导航栏上就会出现一个恼人的弹出事件,但在我的导航上应用固定位置为我解决了这个问题。
dphi5xsq6#
在2023年有一个
scrollbar-gutter
属性。scrollbar-gutter: stable;
就可以了。支持除Opera以外的所有浏览器。