How to hide scrollbar from body using jquery

问题

I want to hide the scroll bar by using Jquery. Can anyone help me with it?

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

This works for Chrome but I want my scroll to hide for all browsers, how can I do that?

回答1:

The reason your code only works in Chrome is that you are using -webkit-scrollbar. Chrome is built upon the (modified) webkit rendering engine, so this tag will only affect Chrome (and Safari, incidentally). Typically, the -webkit-scrollbar property is used to style scrollbars. To hide them, instead use the overflow property. Here is a CSS solution:

body {
    overflow: hidden;
}

If you would like to do the same in jQuery, as asked, try adding the overflow property dynamically, like so:

$("body").css("overflow", "hidden");

Note that you do not have to apply this property to your entire body. Any valid selector will do!

If you are trying to hide the scrollbar, but still allow scrolling, you will have to get a little tricky with how you go about it. Try adding an inner container with overflow: auto and some right padding. This will allow the scrollbar to be pushed out of the containing div, effectively hiding it.

Check out this fiddle to see it in action: http://jsfiddle.net/zjfdvmLx/

The downside to this approach is that it is not entirely cross-browser friendly. Each browser decides how wide the scrollbar should be, and it could change at any time. If the 15px used in the fiddle is not enough for your browser, increase the value.

See this answer for more information.

回答2:

Instead you can hide the scrolling from the body itself.

Try this

<style type="text/css">
    body {
        overflow:hidden;
    }
</style>

回答3:

Yo can try the code below:

$("body").css("overflow", "hidden");

回答4:

Try this

JS Code

$("body").css("overflow", "hidden");

Css Code

 body {width:100%; height:100%; overflow:hidden, margin:0}

回答5:

    <style>
/* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0px transparent; 
  border-radius: 0px;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: transparent; 
  border-radius: 0px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: transparent; 
}
</style>

回答6:

Try this code:

$('body').css({
'overflow': 'hidden'
});

来源：https://stackoverflow.com/questions/32565304/how-to-hide-scrollbar-from-body-using-jquery

标签

jquery

html

css

scroll

scrollbar