Hiding the Scroll Bar on an HTML Page

CSS hide scroll bar, but have element scrollable

You can hide it :

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

For further information, see : Hide scroll bar, but while still being able to scroll

Hiding the scroll bar on an HTML page

Set overflow: hidden; on the body tag like this:

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

The code above "hides" both the horizontal and vertical scrollbars.

If you want to hide only the vertical scrollbar, use overflow-y:

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

And if you want to hide only the horizontal scrollbar, use overflow-x:

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

---

Content is clipped if necessary to fit the padding box. No scrollbars are provided, and no support for allowing the user to scroll (such as by dragging or using a scroll wheel) is allowed. The content can be scrolled programmatically (for example, by setting the value of a property such as offsetLeft), so the element is still a scroll container. _(source)

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#child{
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
    box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

#child{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
    overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

CSS - hide scrollbar

Original answer is

Hiding the scrollbar on an HTML page

Disable it on desktop is the same on mobile.

Hope this help.

How to hide scrollbar in a div

You can make your scroll bar hidden by applying 3 lines of CSS that will work in all different browsers. Try below CSS. [UPDATE]

CSS :

.classname {
  height: 150px;
  overflow: scroll;
  -ms-overflow-style: none;
  /* for Internet Explorer, Edge */
  scrollbar-width: none;
  /* for Firefox */
}

.classname::-webkit-scrollbar {
  display: none;
  /* for Chrome, Safari, and Opera */
}

JSFiddle : https://jsfiddle.net/xet3r59k/3/

How to hide the scroll bar and with the content ramaining scrollable?

There is a CSS rule that can hide scrollbars in Webkit-based browsers (Chrome and Safari). That rule is:

.element::-webkit-scrollbar { width: 0 !important }

There is a CSS rule that can hide scrollbars in IE 10+. That rule is:

.element { -ms-overflow-style: none; }

There used to be a CSS rule that could hide scrollbars in Firefox, but it has since been deprecated. That rule was:

.element { overflow: -moz-scrollbars-none; }

How to make a preloader hide the scroll bar?

There is no scrollbar in your setup. Do you mean the default scrollbar which appears when the content is larger as the viewport of your browser window?

If yes, set the overflow of your body element to hidden. And add an jquery line which change the overflow to auto when the side is loaded.

#css
body {
  overflow:hidden;
} 
#js 
 $(window).on('load', function(){
        $('.preloader').delay(500).fadeOut('slow', function(){
            $(this).attr('style', 'display: none !important');
            /// Ad this line below
            $('body').css("overflow","auto");
        });       
    });

https://codepen.io/Cleee/pen/eYOBNPy

---

Related Topics