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 fo

Solution 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.

Solution 2:

Instead you can hide the scrolling from the body itself.

Try this

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

Solution 3:

Yo can try the code below:

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

Solution 4:

Try this

JS Code

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

Css Code

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

Solution 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>