css - 手机侧边栏 'jumping'-6ren

css - 手机侧边栏 'jumping'

转载作者：行者123 更新时间：2023-11-28 01:21:25

29

4

我有一个功能类似于 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/

29

4

0

文章推荐： python - 使用 lxml/xpath 解析 html 元素

文章推荐： javascript - Bootstrap 仪表板

文章推荐： javascript - 从 DevTools 控制台使用 chrome.tabs.captureVisibleTab()

文章推荐：第二次点击时jquery覆盖隐藏

riscv - 关于 "jump"和 "jump and link"之间翻译的问题
在 risc-v 规范中，它说 j 是 jal 的伪代码。我对它的工作原理感到困惑，因为 j (25 位立即数)和 jal (20 位立即数)的立即值范围不同 - 还有 jalr 带 12 位立即数。
assembly - 为什么不能使用 "jump and link"和 "jump register"进行递归？
希望这是我提出问题的正确位置。为什么不能使用这两个指令递归调用子例程？提前致谢! 最佳答案如果您“跳转并链接”，返回地址将存储在寄存器中。如果再次“跳转链接”，返回地址就会被新的地址覆盖，破坏原来
ssh - 创建从 Jump 主机到数据库的 SSH 隧道，并在 Jump 主机端口上访问数据库
我正在尝试在运行服务器端口的数据库和另一台服务器之间创建一个 SSH 隧道，如下所示。 MySQL:3306 Server-A:3306 我想使用 Server-A:3306作为连接到数据库的数据库
javascript - "Jump dictionaries"，switch 语句，或者如何在没有 eval 的情况下执行 "jump dictionaries"？
我喜欢包含键:值的“跳转字典”的概念，其中值是函数。不过，我不确定我是否应该喜欢这个概念。我想替换一长串 if if-else if 语句。 (我应该使用 switch 语句吗？) 有没有不用eva
javascript - jump-player-tab-container.js :129 Uncaught (in promise) ReferenceError: isActive is not defined(…)render @ jump-player-tab-container. js:129
我是 js 的新手我正在尝试通过 Prop isActive .但我收到一个错误。你们能告诉我为什么我会收到下面的错误代码吗？我在这一行收到了错误 import React from 'react'
ios - 高度约束动画 'jumping'
我一直在创建自己的 UIControl 子类以用于我的调整 iDunnoU .我已经完成了 UIControl，但展开/折叠动画除外。这个动画的问题是它在展开/折叠时会向下/向上“跳跃”，而不是像我原
java - 我如何在LWJGL中看到 "Jump"？
我正在尝试让相机在我的 LWJGL 程序中跳跃。我尝试编写一个 if/else 语句，它会说:“当你到达这个位置时，转到默认的起始位置。”到目前为止，它还在继续飞翔。这是我的代码: if (flyUp
Java游戏编程: Smooth Jumping
在过去的一个半星期里，我一直在使用 Java 和 Swing 从头开始编写游戏。到目前为止，游戏运行一切顺利，除了一件事:跳跃。我正在尝试实现抛物线跳跃，以便玩家不只是向上传送一点点。相反，我希望
julia - 带有稀疏矩阵的 JuMP？
我如何处理 JuMP 中的稀疏矩阵? 例如，假设我想施加以下形式的约束: A * x == 0 哪里A是一个稀疏矩阵和 x变量向量。我假设 A 的稀疏性可以被利用来使优化更快。如何在 JuMP 中利用
swift - "Jumping"到键盘上的数字？
我有一个文本字段，您通常在其中输入数字。但是，用户必须单击键盘上的数字按钮才能进入数字屏幕。有没有办法直接跳转到键盘上的屏幕并可以输入数字？如有任何意见和建议，我们将不胜感激。提前致谢。最佳答案
javascript - 创建粘性滚动导航栏时修复 "jump"
粘性导航栏“跳跃” 我最近制作了一个导航栏，它在滚动时粘在屏幕顶部(进入网页时它从中间开始)。我是在 Mac 上做的，一切正常。但是，当在我的 Windows 桌面上进入网页时，整个导航栏要么跳动，跳
css - 手机侧边栏 'jumping'
我有一个功能类似于 w3schools 的侧边栏，而 w3schools 的侧边栏显示相同的问题。侧边栏“跳跃”并在该区域留下难看的空间，当向下滚动页面和移动 chrome 的导航栏隐藏时，它在顶部留
css - 悬停后元素 "jumps"
我正在尝试创建一组在悬停时展开和收缩的 Font-Awesome 社交媒体图标。但是，当我停止将鼠标悬停在每个图标上时会出现问题，图标中间的图像会“跳跃”而不是像图标的其余部分那样平滑地折叠。这是代码
javascript - 在垂直自动滚动和循环垂直自动滚动中防止 "jump"
我的垂直自动滚动似乎在某些点不规律地停止，我想要一个平滑的滚动。其次，我希望垂直滚动自动重置(几乎无限循环或暗示它永无止境而不仅仅是跳跃)。我将如何着手完成这个？到目前为止，这是我的代码:http:/
Java游戏循环: Frame Jumps
我在 YouTube 上发布了一个视频，您可以在其中看到该问题。我放慢了视频速度，这样你就能真正看到跳跃。链接:https://www.youtube.com/watch?v=17Wftj2-MRM
CSS:访问或重新加载时页面 'Jumps'
我在 Drupal 8 中构建了一个站点(但我认为这是一个 CSS 问题)。当您重新加载页面时，页面“跳转”。它也会在您第一次访问时执行此操作，但如果您按“f5”，您会看得更清楚。我尝试删除 Log
ios - 如何防止此背景动画来自 'jumping'
如您所见，此背景将向下动画。我拥有我想要的一切正常工作，除了在动画完成后，它会跳转，这是我不想要的。我只希望它无休止地滚动而无需跳转到它。下面的 CodePen。关于如何在大约 10 秒后继续滚动而
jquery - 滚动时如何使固定的div JUMP？
更新:这基本上是我想要的，但 div 固定在底部 - http://www.wduffy.co.uk/blog/wp-content/demos/jquery-scrolling-element/ 有
python - 简单的非面向对象神经网络的成本 "jumping"
我正在 Python 3.4 中使用 numpy 和矩阵构建一个神经网络草图，以学习简单的 XOR。我的符号如下: a 是神经元的事件 z 是一个神经元的输入 W 是一个权重矩阵，大小为 R^{#上一
jquery - 单击图库中的链接会导致页面转到 'jump'？
请原谅标题措辞不佳，希望我能在这里解释这个问题。我用 jQuery 编写了一个简单的画廊控件，其中有六个图像和两个按钮控件，允许用户循环浏览整个图像集合。我的这部分工作正常，但是每当我单击一个按钮在

首页

博学

6Ren·AI

商城

css - 手机侧边栏 'jumping'