删除滚动条但不滚动功能

Question

我知道你可以定义overflow:hidden; 在HTML的主体上删除滚动条,但我仍然希望能够用鼠标滚动箭头或滚轮.

在此先感谢您的帮助.

编辑:感谢有关悬停滚动条和自定义栏的所有建议.还要感谢您通过删除滚动条来影响用户体验的所有问题.我将详细说明,以便解释我的来源.

我有一个圆形页面(如果你用滚轮或箭头按钮滚动,当它到达底部时,它会重置到页面顶部并重新开始).一个永无止境的循环.滚动条会对此产生影响,因为条形有限,当它到达底部并重置到顶部时,用户鼠标仍然位于页面底部,这意味着当它们移动时,页面的顶部和底部之间会有一些闪烁.

我打算删除滚动条,并用窗口顶部和底部的箭头按钮替换它.这就是我想完全删除滚动条但保留滚动功能的原因.

Answer 1

有一个名为jscrollpane http://jscrollpane.kelvinluck.com/#examples的 jQuery库,可以进行非常多的修改.

但如果您只想隐藏栏,您也可以将此滚动条推出视图:http://jsfiddle.net/H27BK/

<div id="content">
    <div id="scrollable"> ... ... ... </div>
</div>

用CSS

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 218px; /* #content.width + 18px */
   overflow-y: scroll;    
}

这一切都基于18像素的条宽.

所以我们可以做一些javascript滚动条宽度检测脚本或者只是添加我们放在可滚动div前面的另一个div.

http://jsfiddle.net/uNzEz/

HTML现在是:

<div id="content">
<div id="scrollable">
<div id="txt"> ... ... ...
</div></div></div>

与CSS像:

#content {
    position: relative;
    width: 200px;
    height: 150px;
    border: 1px solid black;
    overflow: hidden;
}
#scrollable {
   height: 150px;   
   width: 240px; /* the bar-width can be theoretical 240px - 200px = 40px */
   overflow-y: scroll;    
}
#txt {
    width: 200px;
}

​