Shi*_*man 52 javascript css browser jquery scrollbar
我想隐藏我的div元素和我的整个滚动条body,但仍然让用户使用鼠标滚轮或箭头键滚动.如何使用原始JavaScript或jQuery实现这一目标？有任何想法吗？
Gra*_*ace 48
与之前的答案一样,您将使用overflow:hidden禁用body/div上的滚动条.
然后,您将mousewheel事件绑定到一个函数,该函数将更改scrollTopdiv以模拟滚动.
对于箭头键,则可以将绑定keydown识别箭头键的事件,然后更改scrollTop并scrollLeft在适当的div来模拟滚动.(注意:你使用keydown而不是keypress因为IE无法识别keypress箭头键.)
编辑:我无法让FF/Chrome keydown在div 上识别,但它在IE8中有效.根据您的需要,您可以设置一个keydown监听器document以滚动div.(以keyCode参考为例.)
例如,使用鼠标滚轮滚动(使用jQuery和mousewheel插件):
<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>
<script>
$("#example").bind("mousewheel",function(ev, delta) {
var scrollTop = $(this).scrollTop();
$(this).scrollTop(scrollTop-Math.round(delta));
});
</script>
(这是一个快速的模型,你必须调整数字,因为对我来说,这个滚动有点慢.)
keyCode参考
mousewheel插件
keydown,keypress @ quirksmode
2012年12月19日更新:
mousewheel插件的更新位置位于: https://github.com/brandonaaron/jquery-mousewheel
Pet*_*don 11
纯CSS解决方案怎么样？我已经测试了这个,它运行正常.但是,我会推荐解决方案3,因为它不是hacky,所有浏览器都支持JS,它非常简单.
解决方案1(跨浏览器但更hacky)
#div {
position: fixed;
right: -20px;
left: 20px;
background-color: black;
color: white;
height: 5em;
overflow-y: scroll;
overflow-x: hidden;
}<html>
<body>
<div id="div">
Scrolling div with hidden scrollbars!<br/>
On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
</body>
</html>解决方案2(仅限IE和Chrome)
只需将nobars类添加到要隐藏滚动条的任何元素即可.
Firefox的overflow: -moz-scrollbars-none是,根据MDN,已经过时了.它曾经工作但现在隐藏溢出并禁用滚动(如果使用).
.nobars {
/* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
/* overflow: -moz-scrollbars-none; (no longer works) */
/* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
-ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
/* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
display: none;
}
解决方案3(跨浏览器javascript)
Perfect Scrollbar不需要jQuery(虽然如果安装它可以使用jQuery)并且在这里有一个 demo.可以使用css对组件进行样式设置,例如以下示例:
.ps-scrollbar-y-rail {
display: none !important;
}
这是一个完整的例子,包括Perfect Scrollbar的实现:
<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
#container {
position: relative; /* can be absolute or fixed if required */
height: 200px; /* any value will do */
overflow: scroll;
}
.ps-scrollbar-y-rail {
display: none !important;
}
</style>
<script src='js/perfect-scrollbar.min.js'></script>
<div id="container">
Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>
<script>
// on dom ready...
var container = document.getElementById("container");
Ps.initialize(container);
//Ps.update(container);
//Ps.destroy(container);
</script>
您不必使用jquery或js来实现此目的.它使用简单的webkit更高效.
只需将下面的代码添加到您的css文件中即可.
::-webkit-scrollbar {
display: none;
}
小心!这将禁用所有滚动条,因此如果您只想隐藏一个滚动条,请务必将其放在特定的类或ID中.
我更倾向于SamGoody的回答提供给这个问题的副本.它保留原生滚动效果,而不是尝试手动重新实现几个特定的输入设备:
更好的解决方案是将目标div设置为overflow:scroll,并将其包装在8px更窄的第二个元素内,其溢出:隐藏.
请参阅原始评论以获得一个充实的示例.您可能希望使用JavaScript来确定滚动条的实际大小,而不是假设它们总是像他的示例那样宽度为8px.
JP *_*shy -4
好吧，在我看来也许不是最直观的，但我可以想象你能够让它成为一次不错的体验，尝试一下。
overflow:hidden;
确保父对象有一个height和width，并显示为block