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
How to Change Color Property of Mat-Slide-Toggle/ Overwrite CSS of Component
Safari: Media Query Not Firing At the Expected Width
How to Align a ≪Div≫ to the Middle (Horizontally/Width) of the Page
How to Force a Div Block to Extend to the Bottom of a Page Even If It Has No Content
Using Percentage Values With Background-Position on a Linear-Gradient
Border Gradient With Border Radius
When to Use Margin VS Padding in Css
Areas Covered by Flexbox Which Are Difficult or Impossible to Achieve With Grid
Preventing Scroll Bars from Being Hidden For Macos Trackpad Users in Webkit/Blink
How to Change the Color of an Svg Element
Bootstrap 4 Table With One Column Larger Than Others
How to Easily Horizontally Center a ≪Div≫ Using Css
How to Style the Html5 Form Validation Error Messages With Css
I Do Not Want to Inherit the Child Opacity from the Parent in Css
Using Only Css, Show Div on Hover Over Another Element