本问题应该属于CSS问题。有好几个版本,我从最开始搜问题到最终确定原因:
1. css中配置position: fixed会导致**滚动条被遮挡**该怎么解决? 【这个问题只有一个相关文章(2021年)但始终没有解决方法)
2. 为什么有些滚动条在HTML文档上层,有些在下层? 【可以看下面截图:1是掘金网站的,2是仿掘金项目demo版】
1
2
第二个问题能看懂吧?就是我的顶部栏设置成`position: fixed;`后,就会遮挡滚动条。
两个问题都是一样的,我当时还是仿掘金网站的写法做的,所以这个fixed也是要加的。
甚至我还开了3D视图来观察两者之间的区别。
(这些过程是无用的)
但最后我思考了,是body标签的问题嘛?是`__next`这个id的标签问题嘛?【`__next`标签是根标签】
我点开看了:
怀疑起来了!!
我把属性取消掉,遮挡就不存在了,但是滑动不了了。
再一看body标签:`overflow: hidden;`
好家伙,就是这个。我把上面的属性都取消了。就默认回body的`overflow:auto;`了,然后滚动条不被遮挡了,也可以正常滑动了。
---
下面来分析一下:
因为__next标签设置了高度,当overflow时,就会出现滚动条(**仅仅是该标签的**)。所以当该标签里面有元素设置成fixed时,就会脱离原来文档,遮挡住滚动条(当然例子中元素的宽度要够宽才遮挡)。
当body不再做`overflow: hidden;`设置了,原来的文档流高度就不会限制死了,body也就会出现原来应该出现滚动条了。
---
bytheway 可能其他框架下实现的效果也是和demo一样的。我不能评论它们好不好,但是我是遇见了这个问题,也通过这个方式解决了,说明还是要按照需要来走,比如改改根标签的设置。
---
顺带一提,我还发现掘金网站的顶部导航条模块是与标签模块分开写的,文章列表等版心内容竟然用margin控制好的布局。。emm
我这个标题取得...