隐藏滚动条，但可以用鼠标滚动 [英] hide scrollbar but able to scroll with mouse

问题描述

我想隐藏滚动条出现在一个长格，但仍然能够通过鼠标或键盘箭头键滚动。我在这里阅读另一个线程关于滚动。尝试使用..但不能实现...可以有人指导我如何清楚地实现，或者有任何其他选项与jQuery或CSS？

任何帮助将不胜感激。

谢谢

解决方案

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

  #outer {
 width：200px; 
 height：200px; 
 overflow：hidden; 
} 
 
 #inner {
 height：200px; 
 width：225px; 
 overflow：scroll; 
} 
  

也就是说，内部块将足够宽以包含滚动条，但由含有div的视线隐藏起来。这在webkit中适用于我。您可能不得不摆弄宽度以确保文本不会被截断。

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

I want to hide scrollbar to appear on a long div,but still able to scroll through mouse or keyboard arrow keys.I read another thread here about scrollable.Tried to use that..but could not implement that...could someone guide me how to implement that clearly or is there any other option with jquery or css?

Any help would be greatly appreciated.

Thanks

解决方案

I'm not 100% sure on the browser compatibility of this, but you can have two div's - an outer div and a inner div. The inner div will have all your content. Your css could then look like this:

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

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

That is, the inner block would be wide enough to contain a scrollbar, but have it hidden from sight by the containing div. This worked for me in webkit. You might have to fiddle with the widths to make sure text doesn't get cut off.

That said, I would carefully think about WHY you're trying to do this. This could be a huge usability issue for your users, as they will not have any indication that there is more content within the div.

这篇关于隐藏滚动条，但可以用鼠标滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！