有没有办法用纯css防止滚动条推送内容,或者整个页面向左? 我的意思是没有黑客或任何东西。
我尝试了两种 javascript 解决方案:
1)将body设置为overflow hidden,将body.offsetWidth保存在一个变量中,然后overflow visible,然后用当前的body.offsetWidth减去offsetWidth,并将差值应用到右边距。
2) 计算 offsetWidth 并在每次调整大小时将其应用于包装器 div。
什么没用:
1) 绝对位置。
2) 将所有内容都向左浮动是个坏主意。
3) 让滚动条可见(看起来很糟糕)。
4) Overflow-y hidden 使用户不友好。
最佳答案
有很多方法可以解决这个问题,但通常您不会介意向左推一点:
<overflow-y: scroll
到body
并确保 始终有一个滚动条。利用视口(viewport)宽度包括滚动条而百分比不考虑滚动条的事实:
一个。将
width: 100vw
赋给body
元素,或者将
margin-left: calc(100vw - 100%)
赋给html
元素,无论是否有滚动条,您都有一个固定区域可以处理。甚至还有一个弃用
overflow: overlay
在页面上绘制而不是将其向左移动的属性。
关于html - 防止滚动条将内容推送到左侧的纯 css 方法?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35513264/