隐藏滚动条但可以用鼠标滚动答案

【问题标题】：hide scrollbar but able to scroll with mouse隐藏滚动条但可以用鼠标滚动
【发布时间】：2012-02-27 04:41:23
【问题描述】：

我想隐藏滚动条以显示在长 div 上，但仍然能够滚动鼠标或键盘箭头键。我在这里阅读了另一个关于可滚动的线程。尝试使用它..但无法实现...可以有人指导我如何清楚地实现这一点，还是有 jquery 或 css 的任何其他选项？

任何帮助将不胜感激。

谢谢

【问题讨论】：

【解决方案1】：

我不能 100% 确定它的浏览器兼容性，但您可以有两个 div - 一个外部 div 和一个内部 div。内部 div 将包含您的所有内容。你的 CSS 可能看起来像这样：

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

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

也就是说，内部块足够宽以包含滚动条，但它会被包含的 div 隐藏起来。这在 webkit 中对我有用。您可能需要调整宽度以确保文本不会被截断。

也就是说，我会仔细考虑您为什么要这样做。对于您的用户来说，这可能是一个巨大的可用性问题，因为他们不会有任何迹象表明 div 中有更多内容。

【讨论】：

烦人的解决方法，但它可以解决问题。通过使用 JS .scrollWidth，您可以动态定义 #outer div 的宽度。
@chipcullen：在 Chrome/Safari 中尝试您的演示：突出显示/选择一行并将鼠标向右拖动，您将看到滚动条。或者使用 textarea 代替内部元素，然后用一些文本填充它。然后使用键盘键Page Up 和Page Down。
@RainLover 当然，如果你这样做，你可以看到滚动条 - 我的方法绝对是烟雾和镜子。我仍然不喜欢隐藏滚动条。