28

我知道你可以定义溢出：隐藏；在 HTML 的主体上删除滚动条，但我仍然希望能够使用鼠标上的箭头或滚轮滚动。

提前感谢您的帮助。

编辑：感谢有关悬停滚动条和自定义条的所有建议。还要感谢您对删除滚动条影响用户体验的所有担忧。我将详细说明，以便您解释我来自哪里。

我有一个圆形页面（如果您使用滚轮或箭头按钮滚动，当它到达底部时，它会重置到页面顶部并重新开始）。一个永无止境的循环。滚动条对此的影响是有限的，当它到达底部并重置到顶部时，用户的鼠标仍位于页面底部，这意味着当他们移动它时，页面顶部和底部之间会有一些闪烁。

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

4

3 回答 3

25

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

但是如果你只想隐藏栏，你也可以把这个滚动条推到视野之外：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;
}

​</p>

于 2012-11-09T23:47:45.983 回答
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());    
});

演示

于 2012-11-09T23:11:57.897 回答
0

您可以尝试使用其中一个 jQuery 滚动条插件，它们允许自定义 css 设计...

您可以简单地选择将滚动条设计为不可见，但鼠标功能将保留...

我个人最喜欢的是malihu，只要确保使用它的鼠标滚轮扩展。

编辑：

也许在您查看了自定义设计的滚动条的外观之后，您可以重新考虑显示滚动条。毕竟，它们是有用的和有启发性的。

于 2012-11-09T23:25:25.800 回答