隐藏滚动条，同时仍然可以使用鼠标/键盘滚动[重复]

Posted 2023-02-21

【中文标题】隐藏滚动条，同时仍然可以使用鼠标/键盘滚动[重复]

【英文标题】：Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]

【发布时间】：2011-03-18 15:27:03

【问题描述】：

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

我想知道是否可以隐藏滚动条，同时仍然可以使用鼠标/键盘进行滚动。

我尝试使用 CSS：overflow: hidden;。效果是禁用滚动条和禁用滚动。

【参考方案1】：

为了将来参考，还有一个不使用 jQuery 的解决方案 - 只需让包装器 div 样式包含 overflow:hidden 并使用此 javascript 两行代码：

// get the width of the textarea minus scrollbar
var textareaWidth = document.getElementById("textarea").scrollWidth;

// width of our wrapper equals width of the inner part of the textarea
document.getElementById("wrapper").style.width = textareaWidth + "px";

请参阅demo 或完成HOWTO。

更新：您可以使用相同的原理创建没有滚动条的可滚动div：demo。

【讨论】：

不错，但浏览器和移动设备的兼容性如何？

@cocoacoder 如果您想知道的话，您可以随时在不同的浏览器和移动设备中尝试...我在 ios 和 IE9 上进行了测试，它运行良好。这种方法没有什么太奇怪的地方，所以它应该是非常交叉兼容的。只要平台支持 scrollWidth 属性，它就可以正常工作。

好像全世界的浏览器都支持它：w3schools.com/jsref/prop_element_scrollwidth.asp

【参考方案2】：

有一个名为 Scrollable 的 jQuery 插件可以满足您的需求。

【参考方案3】：

不是原生的，但我想您可以通过使用 Javascript 来实现自己的滚动机制来捕获某些击键并使用 CSS 相应地重新定位容器元素。不过会很丑！