Css 侧边栏'；跳跃'；移动电话

我有一个功能与w3schools类似的侧栏，w3schools的侧栏显示了相同的问题。侧边栏“跳跃”并在该区域留下难看的空间，当向下滚动页面时，mobile chrome的导航栏隐藏，它在顶部留下一个洞，当向上滚动且菜单滑出时，它覆盖顶部，并在底部留下一个空间

这是我第一次开始测试手机时边栏的状态（我忘了）

我的侧边栏和w3的主要区别在于它是可滚动的，因为我将用几个链接填充它。现在，考虑到w3的错误与我的相同，我知道这不是由侧边栏上的附加内容引起的

通过测试和研究，我发现移动设备的视口（以及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;
    }
}

尝试添加

查看html文档的
中的
，看看这是否有帮助。
不幸的是，没有帮助。所取得的成就只是使移动版放大而无法缩小
.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;
    }
}