手机端横向滚动条修复与 postion:sticky 冲突问题
rizon · othorizon · 2022-07-23 18:57:57 +08:00 · 980 次点击这是一个创建于 860 天前的主题，其中的信息可能已经有所发展或是发生改变。
自适应网页，手机端会导致横向滚动条出现，可以横向移动，这是由于垂直滚动条占用了屏幕位置导致，修复方案
:root {
overflow-x: hidden;
}
:root body {
position: absolute;
}
body {
width: 100vw;
overflow: hidden;
}
这个方案可以解决这个问题，但是引发另一个问题：
网页中使用了 position:sticky ，这个要求父元素不能是 position: absolute;
这下怎么办啊
 |
1
alvinbone88 2022-07-23 20:31:07 +08:00
你 body 设置成 overflow: hidden ，页面还能滚动吗
|
 |
2
rizon OP @alvinbone88 #1 会导致 position sticky 失效的
|
|
3
rizon OP 该问题已解决，是由于页面的一些地方 margin 负数超出了屏幕才出现的横向滚动问题。修复一下就好了。
并不是所谓的垂直滚动条占用屏幕空间（国内某博文看到的，完全在瞎扯误导了我） |
Select Language