logo标签列表

如何禁用浏览器或元素滚动条，但仍允许使用鼠标滚轮或箭头键进行滚动？

javascriptjquerycssbrowserscrollbar
54

我想隐藏我的div元素和整个body的任何滚动条，但仍然允许用户使用鼠标滚轮或箭头键进行滚动。如何使用原始JavaScript或jQuery实现？有什么想法吗？

1
我在这个链接上也回答了同样的问题(https://dev59.com/j2Qn5IYBdhLWcg3wpYj0#16671476)。希望对某些人有所帮助。 - Mr_Green
https://github.com/lsvx/hide-bars - davidcondrey
7个回答
49
与之前的答案一样，您可以使用overflow:hidden来禁用body/div上的滚动条。 然后，您可以将mousewheel事件绑定到一个函数，该函数会更改div的scrollTop以模拟滚动。
对于箭头键，您可以将keydown事件绑定到识别箭头键的函数上，然后根据需要更改div的scrollTop和scrollLeft以模拟滚动。(注意: 由于IE不识别箭头键的keypress，所以您需要使用keydown。) 编辑：我无法让FF/Chrome在div上识别keydown，但在IE8中可以正常工作。根据您的需要，您可以在document上设置一个keydown监听器来滚动div。(例如，查看keyCode参考。)
例如，使用jQuery和鼠标滚轮插件进行滚动：
<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 参考
鼠标滚轮插件
keydown、keypress @ quirksmode

更新于 2012 年 12 月 19 日：

鼠标滚轮插件的更新位置在：https://github.com/brandonaaron/jquery-mousewheel

我在尝试隐藏BODY上的滚动条并将鼠标滚轮绑定到BODY滚动时遇到了问题。 - David B
1
@DavidBarnes 嗯，看起来很多东西在3年后都已经过时了。我不得不从Github上获取更新的鼠标滚轮插件，并且为了使滚动工作，我必须绑定到文档而不是正文。这是我的示例：http://pastebin.com/U08b6MCx - Grace
1
@radry 的评论：顶部答案中提出的解决方案已经不再适用，即使是“更新”评论也不行。至少我的鼠标滚轮没有反应。如何在2014年解决这个问题？ - Taifun
12

有没有纯CSS的解决方案呢？

解决方案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（使用实验性功能，可能不支持某些浏览器）

只需将nobars类添加到您想要隐藏滚动条的任何元素上即可。

.nobars {
    /* Firefox: https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width */
    scrollbar-width: none;
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome/Edge/Opera/Safari: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

解决方案3（跨浏览器Javascript）

完美滚动条不需要jQuery（虽然可以利用已安装的jQuery），并且有演示可用。组件可以用CSS进行样式设置，例如以下示例：

.ps__rail-y {
  display: none !important;
}

这里是一个完整的示例，包括完美滚动条的实现：
<link rel="stylesheet" href="css/perfect-scrollbar.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: auto;
  }
  .ps__rail-y {
    display: none !important;
  }
</style>
<script src='dist/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");
  var ps = new PerfectScrollbar(container);
  //ps.update(container);
  //ps.destroy(container);
</script>
我明白你的意思。你可以单独创建一个背景来解决这个问题，并使其与滚动<div>的大小相同。 - Peter Gordon
似乎-moz-scrollbars-none确实禁用了滚动条，还是有什么方法可以将其与overflow：auto结合起来使用吗？ - phreakhead
这曾经是可行的，但现在似乎不再是这样了。看起来只有在Firefox中添加此选项后才能使用Javascript :( - Peter Gordon
@phreakhead 添加了第三种方法，它依赖于JS但不依赖于jQuery。其他解决方案在某些情况下仍然可能有用。 - Peter Gordon
8

您不必使用jQuery或JS来实现此功能。使用简单的webkit更具性能优势。

只需将以下代码添加到您的CSS文件中即可。

::-webkit-scrollbar { 
    display: none; 
}

注意！这将禁用所有滚动条，因此请确保将其放在特定的类或ID中，如果您只想隐藏一个滚动条。

2
是的，但它在其他浏览器中不起作用。据我所知，目前只有Webkit浏览器允许自定义滚动条。你知道像这样的跨浏览器解决方案吗？ - The Light Sabrix
@TheLightSabrix，你可能会对我在上面的我的IE、Chrome和Firefox答案感兴趣（请参见解决方案2）。我没有费心研究其他浏览器，如果你想让我尝试特定的浏览器，请评论告诉我。 - Peter Gordon
7

我更喜欢SamGoody在这个问题的重复提问中所提供的答案。它保留了本地滚动效果，而不是试图手动重新实现某些特定输入设备的效果：

更好的解决方案是将目标div设置为overflow:scroll，并将其包装在一个比其窄8px的第二个元素中，这个第二个元素的overflow:hidden。

查看原始评论以获取详细示例。您可能需要使用JavaScript确定滚动条的实际大小，而不像他的示例那样假定它们总是8px宽。

1
很好的建议，但不适用于Mac，因为它们没有滚动条。 - dr.dimitru
4
为了让它对我起作用，我使用了以下CSS代码：
html { overflow-y: hidden; }

但是我使用 $(this).scrollTop() 时出现了问题，所以我绑定了我的 #id，但调整了窗口的scrollTop。此外，我的平滑滚动鼠标会触发大量的1或-1增量，因此我将其乘以20。

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
太棒了。在我的情况下，我需要使用 overflow-x: hidden。谢谢！ - Edward Anderson
0

正如Baldráni上面所说的那样

::-webkit-scrollbar { display: none; }

或者你可以这样做

::-webkit-scrollbar{ width: 0px; }


（为了其他通过谷歌搜索而偶然发现此内容的人发布！）

-4

在我看来，这可能不是最直观的，但我可以想象你能够让它成为一个不错的体验，试试看吧。

overflow:hidden;

请确保父对象具有height和width属性，并显示为block

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接