携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第9天,点击查看活动详情
完蛋,一个小问题卡了我好久。无从下手,到现在,也还没有解决,有一个大致思路,不知道对不对。记录一下,雀食觉得这个问题很简单,理一下思路,帮助自己分析。
问题
如上图,现在页面是正常大小,100%比例。侧边 el-aside 高度是 935px,然后左侧 el-menu 中, el-submenu 的菜单项是有 九项 的。
如果把页面放大,如下图:
这是我将页面放大了一些后,可以看到有一个滚动条出现,此时左侧的 el-aside 高度只有 559.429px,然后,注意左侧的菜单子项,即使将滚动条滚到最下面,也只有 八项 了。而且,不管我再怎么放大, 滚动条再怎么滚动,都只能加载出来 八项。
分析
我一开始怀疑是滚动条问题,是不是滚动条设置有问题。然后,我去看代码,发现我好像没有写关于滚动条的,我只是用了一下 el-menu 和 el-submenu 来展示层级,这个滚动条,应该是 el-container 容器里面的,而其他的一些样式修饰,是他人封装好的,我也只是在他人代码的基础上进行了一些改动,所以,有些样式也还没找到。
然后我又想到会不会是高度原因,因为我在放大的时候,一开始都还好好的,能够完整加载出 九项,但只要高度缩小到出现滚动条,最下面的那一项就被“挡”住了一样,怎么都看不到了。参考了一些博客后,发现可能是高度,放大后,高度太小,达不到能够触发滚动条事件的高度,就导致加载不出最后的那一项。但这要去改,也不是直接改高度,而是将滚动条的事件触发高度设置的大一点,当高度到达一个比较大的值时,就立马触发滚动条的事件去加载菜单项,防止页面缩放,高度变得太小,还达不到触发滚动条事件。
但在尝试了一下后,发现也没效果,因为他人的情况跟我还不怎么一样,所以,僵住了......
虽然我也感觉这个问题很简单,但也要记录一下,因为毕竟困了蛮久,挂出来长长记性。可能是没有静下心好好看......我再去看看
有错误,望指正!
我向你敬礼啊,Salute!