隐藏滚动条但仍能用鼠标滚动

Question

我想隐藏出现在长div中的滚动条，但仍然可以通过鼠标或键盘箭头来滚动。我在这里读到另一个关于可滚动的线程。尝试使用那个..但无法实现...有人能指导我如何清楚地实现它吗，或者是否有任何其他具有jquery或css的选项？

非常感谢任何帮助。

谢谢

- user1187405

Answer 1

我不能百分之百确定这个在浏览器上的兼容性，但你可以有两个div元素 - 一个外部div和一个内部div。内部div将拥有所有你的内容。你的css代码可能看起来像这样：

#outer {
    width: 200px;
    height: 200px;
    overflow:hidden;
}

#inner {
    height: 200px;
    width: 225px;
    overflow: scroll;
}

也就是说，内部块将足够宽以容纳滚动条，但由包含div隐藏在视线之内。这对我在webkit中起作用。您可能需要调整宽度，以确保文本不被截断。

话虽如此，我会仔细考虑为什么要这样做。这可能会给您的用户带来巨大的可用性问题，因为他们将没有任何迹象表明div中有更多内容。

- chipcullen

---

有点烦人的解决方法，但是能解决问题。通过使用JS的.scrollWidth，您可以动态定义#outer div的宽度。 - Luuuud

@chipcullen：在Chrome/Safari中尝试您的演示：选择一行并向右拖动鼠标，您将看到滚动条。或者使用文本区域代替内部元素，然后填写一些文本。然后使用键盘上的“Page Up”和“Page Down”键。 - Mori

@RainLover 当然可以，如果你这样做，就可以看到滚动条了——我的方法确实是花招。但我仍然不喜欢完全隐藏滚动条。 - chipcullen

Answer 2

要做到这一点，需要添加以下 CSS：

.div::-webkit-scrollbar {
  display: none;
}

这是在说，嘿，移除滚动条的显示，但保留其功能。

- sauhardo

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何编写好答案的更多信息。 - Community