我知道你可以定义overflow:hidden;在HTML的主体上删除滚动条,但我仍然可以使用鼠标滚动箭头或滚轮。
提前感谢您的帮助。
编辑: 感谢关于悬停滚动条和自定义栏的所有建议。还要感谢您通过删除滚动条来影响用户体验的所有问题。我将详细说明一下,以便解释我的来源。
我有一个圆形页面(如果你用滚轮或箭头按钮滚动,当它到达底部时,它会重置到页面顶部并重新开始)。一个永无止境的循环。滚动条会对此产生影响,因为条形图是有限的,当它到达底部并重置到顶部时,用户鼠标仍然位于页面底部,这意味着当它们移动时,页面的顶部和底部之间会有一些闪烁。
我打算删除滚动条并将其替换为窗口顶部和底部的箭头按钮。这就是为什么我想完全删除滚动条但保留滚动功能。
答案 0 :(得分:24)
有一个名为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。
现在是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;
}
答案 1 :(得分:1)
好的,新答案。我刚刚开发了一个小技巧,与jQuery混合。
在正文中创建一个包装器div
,使用以下css。
body { overflow: hidden; }
#wrapper { overflow: auto; }
然后,只需设定各自的高度:
$("body").height($(window).height());
$("#wrapper").height($("#text").height());
支持调整大小
$(window).trigger('scroll');
$(window).scroll(function() {
$("body").height($(window).height());
$("#wrapper").height($("#text").height());
});
答案 2 :(得分:0)
您可以尝试使用其中一个jQuery滚动条插件,它们允许自定义css设计......
您可以简单地选择将滚动条设计为不可见,但鼠标功能仍将保留......
我个人最喜欢的是malihu's,只需确保使用它的鼠标滚轮扩展。
修改
也许在您查看自定义设计滚动条的外观后,您可以重新考虑显示滚动条。毕竟,它们是有用的和有益的。