CODEWITHSUNDEEP
jqueryhtmlcssscrollscrollbar
Jabeerbasha Shaik
Jabeerbasha Shaik

Reputation: 11

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?

Upvotes: 1

Views: 29236

Answers (6)

ejaz ali
ejaz ali

Reputation: 3

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

Upvotes: 0

Kay Marshal
Kay Marshal

Reputation: 21

Instead you can hide the scrolling from the body itself.

Try this 

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

Upvotes: 1

Anthony Hilyard
Anthony Hilyard

Reputation: 1240

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.

Upvotes: 13

akash
akash

Reputation: 2157

Try this

JS Code

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

Css Code

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

Upvotes: 0

guvenckardas
guvenckardas

Reputation: 738

Yo can try the code below:

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

Upvotes: 0

Sumanta736
Sumanta736

Reputation: 705

Try this code:

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

Upvotes: -1

Related Questions