删除 HTML 滚动条但允许鼠标滚轮滚动 [重复]

Posted 2023-04-13

【中文标题】删除 HTML 滚动条但允许鼠标滚轮滚动 [重复]

【英文标题】：Remove HTML scrollbars but allow mousewheel scrolling [duplicate]

【发布时间】：2011-03-16 06:08:43

【问题描述】：

可能重复：How to disable browser or element scrollbar, but allow scrolling with wheel or arrow keys?

我可以通过设置 CSS 属性 overflow-y: hidden 来禁用网格中的垂直滚动条。但是，这也取消了使用鼠标滚轮滚动内容的功能。

有没有办法不显示滚动条但仍然允许通过鼠标滚轮或箭头键滚动内容？

【参考方案1】：

有javascript方法，看你复制的线程。

更好的解决方案是将目标 div 设置为 overflow:scroll，并将其包裹在一个窄 8px 的第二个元素中，即 overflow:hidden。

目标元素将有一个隐藏的滚动条。鼠标滚轮可以工作，但滚动条不会显示。

<div style='overflow:hidden; width:200px;'>
   <div style='overflow:scroll; width:208px'>
      My mousewheel scrollable content here....
   </div>
</div>

请注意，滚动条的宽度 8px 是一个随机数 - 它可能更多，并且可能需要每个浏览器的 CSS。

在我的书中还是比 JS 好。

【讨论】：

这里是how to calculate scrollbar sizes from JavaScript。

我避免使用 JS，因为许多用户有 NoScript 或其他不寻常的设置 - 纯 CSS 更可靠。

我正在寻求这个解决方案，但发现我的滚动条会自动隐藏，因为我的绝对位置内部 div 将自身设置为 215 像素（15 像素滚动条），同时保持左：0。我是否有任何潜在问题它？不过，我不太确定是哪些规则使它起作用。

很好的解决方案。对它的一点改进是对内部 div 使用相对宽度，即 。这样可以确保当外部 div 调整大小时，内部 div 也会适应新的宽度。

在 Chrome/Safari 中尝试您的演示：突出显示/选择一行并将鼠标向右拖动，您将看到滚动条。或者使用 textarea 而不是内部 div，然后用一些文本填充它。然后使用键盘键Page Up 和Page Down。

【参考方案2】：

您可以使用jScrollPane，它允许您将浏览器滚动条替换为自定义滚动条：

由于您可以使用 CSS 设置这些自定义滚动条的样式，因此您可以轻松地使它们消失（尝试类似：.jScrollPaneTrack display: none; ）

【讨论】：

这是被问到的问题的相反答案！例如，它们需要能够使用鼠标滚轮滚动（如自然滚动）并具有自定义滚动条的原因是因为 jScrollPane（和许多其他）不适用于可触摸设备。顺便说一句，我不推荐使用 jScrollPane 的另一个原因至少是因为它的示例托管在某些甚至不支持不区分大小写的 url 的环境中！在 iPhone 或任何其他设备上手动输入测试时，这非常令人困惑。

在我看来它回答了这个问题。 jScrollPane 确实适用于触摸设备。当然可以使用鼠标滚轮和箭头键（这是问题实际提出的问题）。您的另一个原因是因为它托管在 *nix 上（就像绝大多数网络一样）并且您在阅读或输入大写字母时遇到问题？？！

它的行为证实了我的想法。我不知道窗格在什么条件下必须在可触摸设备上工作，但在此链接上：kelvinluck.com/assets/jquery/jScrollPane/basic.html 它不适用于我的 iPhone。这些样品都没有。尝试滑动块的内容时，它也不起作用，也不允许拖动滚动条。它仅在单击栏（向上/向下翻页）时起作用。而且我已经“忽略”了您的答案，因为我正在寻找作者正在寻找的相同解决方案，但是在这种情况下，此建议无法解决任何问题。抱歉，这是我的意见。