我有一个功能类似于 w3schools 的侧边栏，而 w3schools 的侧边栏显示相同的问题。侧边栏“跳跃”并在该区域留下难看的空间，当向下滚动页面和移动 chrome 的导航栏隐藏时，它在顶部留下一个洞，当向上滚动和菜单滑出时，它覆盖了顶部，并且在底部留出空间。
这是我第一次开始测试移动设备时侧边栏的状态(我忘记了)
.sidenav {
width: 250px;
position: fixed;
top: 0;
bottom: 0;
z-index: 1;
left: -250px;
overflow-y: scroll;
overflow-x: scroll;
transition: var(--delay);
overflow: -moz-scrollbars-none !important;
background: -webkit-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -moz-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -o-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
}
我的侧边栏和 w3 的主要区别在于它是可滚动的，因为我会用一些链接填充它。现在，考虑到 w3 和我有同样的错误，我知道一个事实，它不是由放置在侧边栏上的附加内容引起的。
通过测试和研究，我发现移动设备的视口(viewport)(以及 chrome 菜单的隐藏)是真正导致问题的原因，还有底部，浏览器无法更新“顶部”和“底部” ' 到 0。
我尝试通过多种方式解决这个问题:
- 去除底部
这最终创建了一个导航链接/内容结束的空间
- 使高度 100%
当可扩展的 div 打开并破坏桌面功能时，它就无法滚动
- 目前的解决方案
它允许桌面版本完全按预期工作，修复了“空间”或“跳跃”问题，但也使得它无法在移动设备上一直向下滚动。
.sidenav {
width: 250px;
position: fixed;
top: 0;
height: 100vh;
z-index: 1;
left: -250px;
overflow-y: scroll;
overflow-x: scroll;
transition: var(--delay);
overflow: -moz-scrollbars-none !important;
background: -webkit-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -moz-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: -o-linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
background: linear-gradient(to right, #999999, #999999 95%, #000000 95%, rgba(255,0,0,0) 100%);
}
@media (min-width: 1000px) {
.sidenav {
bottom: 0;
height: initial;
}
}
最佳答案
尝试添加 <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
在<head>您的 html 文档，看看是否有帮助。
关于css - 手机侧边栏 'jumping'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51466892/