隐藏滚动条但仍能使用鼠标/键盘滚动

Question

可能是重复问题：
如何禁用浏览器或元素的滚动条，但允许使用鼠标滚轮或箭头键进行滚动？

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

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

- Arthur

Answer 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";

更新: 你可以使用相同的原则创建没有滚动条的可滚动div。

- HonzaBé

---

好的，但这个在浏览器和移动设备上的兼容性如何？ - cocoa coder

@cocoacoder 如果你想知道的话，你可以在不同的浏览器和移动设备上尝试一下...我在iOS和IE9上测试过了，它可以正常工作。这种方法没有太多的hack技巧，所以它应该是相当跨平台兼容的。只要平台支持scrollWidth属性，它就可以正常工作。 - Gavin

似乎全世界的浏览器都支持它：http://www.w3schools.com/jsref/prop_element_scrollwidth.asp - Mahdi Jazini

Answer 2

有一个叫做Scrollable的jQuery插件可以实现你想要的效果。

- Peter Örneholm

Answer 3

原生不支持，但我想你可以通过使用Javascript来捕获特定的按键并使用CSS重新定位容器元素来实现自己的滚动机制。不过这样做会很丑陋！

- Josh Stodola