How can I disable a browser or element scrollbar,

2019-01-01 10:40发布

站内问答 / JavaScript
1288 7 4

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

7条回答
春风洒进眼中
2楼-- · 2019-01-01 11:14

What about a purely CSS solution? I've tested this and it works fine. However, I would recommend Solution 3 as isn't hacky, it's supported by all browsers with JS and it's very simple.

Solution 1 (cross browser but more 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>

Solution 2 (IE and Chrome only)

Just add the nobars class to any element you want to hide the scrollbars on.

The Firefox overflow: -moz-scrollbars-none is, according to MDN, obsolete. It used to work but now hides the overflow and disables scrolling if used.

.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;
}

Solution 3 (cross browser javascript)

Perfect Scrollbar doesn't require jQuery (although it can utilise jQuery if installed) and has a demo available here. The components can be styled with css such as in the following example:

.ps-scrollbar-y-rail {
  display: none !important;
}

Here is a complete example including the implementation of 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>
查看更多
0人赞 添加讨论(0) 举报
刘海飞了
3楼-- · 2019-01-01 11:15

You dont have to use jquery or js to make this. Its more performant with simple webkit.

Just add the code below to your css file.

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

Caution ! This will disable all the scrollbar so be sure to put it in a specific class or id if you just want one to be hidden.

查看更多
0人赞 添加讨论(0) 举报
其实，你不懂
4楼-- · 2019-01-01 11:25

To get this working for me, I used this CSS:

html { overflow-y: hidden; }

But I had problems using $(this).scrollTop(), so I bound to my #id, but adjusted the scrollTop of window. Also, my smooth scrolling mouse would fire lots of 1 or -1 deltas, so I multiplied that by 20.

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
查看更多
0人赞 添加讨论(0) 举报
人气声优
5楼-- · 2019-01-01 11:27

As Baldráni said above

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

Or you can do

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


(posted for other people that stumble on this from google search!)

查看更多
0人赞 添加讨论(0) 举报
其实，你不懂
6楼-- · 2019-01-01 11:29

Well, perhaps not the most intuitive in my opinion, but I can imagine you being able to make it a decent experience, give this a try. 

overflow:hidden;

make sure the parent object has a height and width, and displays as block

查看更多
0人赞 添加讨论(0) 举报
时光乱了年华
7楼-- · 2019-01-01 11:35

I much prefer SamGoody's answer provided to a duplicate of this question. It leaves native scrolling effects intact, instead of trying to manually re-implement for a few particular input devices:

A better solution is to set the target div to overflow:scroll, and wrap it inside a second element that is 8px narrower, who's overflow:hidden.

See the original comment for a fleshed-out example. You may want to use JavaScript to determine the actual size of scrollbars rather than assuming they are always 8px wide as his example does.

查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(4)