How to always show the vertical scrollbar in a browser?
jQuery shouldn't be required. You could try adding the CSS:
body {overflow-y:scroll;}
This works across the latest browsers, even IE6.
CSS - Overflow: Scroll; - Always show vertical scroll bar?
Just ran into this problem myself. OSx Lion hides scrollbars while not in use to make it seem more "slick", but at the same time the issue you addressed comes up: people sometimes cannot see whether a div has a scroll feature or not.
The fix: In your css include -
::-webkit-scrollbar {
-webkit-appearance: none;
width: 7px;
}
::-webkit-scrollbar-thumb {
border-radius: 4px;
background-color: rgba(0, 0, 0, .5);
box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}
/* always show scrollbars */
::-webkit-scrollbar { -webkit-appearance: none; width: 7px;}
::-webkit-scrollbar-thumb { border-radius: 4px; background-color: rgba(0, 0, 0, .5); box-shadow: 0 0 1px rgba(255, 255, 255, .5);}
/* css for demo */
#container { height: 4em; /* shorter than the child */ overflow-y: scroll; /* clip height to 4em and scroll to show the rest */}
#child { height: 12em; /* taller than the parent to force scrolling */}
/* === ignore stuff below, it's just to help with the visual. === */
#container { background-color: #ffc;}
#child { margin: 30px; background-color: #eee; text-align: center;}
<div id="container"> <div id="child">Example</div></div>
Making the main scrollbar always visible - without scroll
The behavior works as expected on Windows machines, but it appears MacOS and iOS have their own handling of scrollbars. You can see this issue addressed in this question.
Some of the options listed within the answer are to style the scrollbar manually like so:
.frame::-webkit-scrollbar {
-webkit-appearance: none;
}
.frame::-webkit-scrollbar:vertical {
width: 11px;
}
.frame::-webkit-scrollbar:horizontal {
height: 11px;
}
.frame::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white; /* should match background, can't be transparent */
background-color: rgba(0, 0, 0, .5);
}
.frame::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
You can also use javascript to manually scroll the scrollbar on page load, just a single pixel. Like this:
$('#scrollable-section').scrollTop(1).scrollTop(0);
Why is the vertical scrollbar always visible
just change overflow-y:scroll
to overflow-y:auto;
How do I force a vertical scrollbar to appear?
Give your body
tag an overflow: scroll;
body {
overflow: scroll;
}
or if you only want a vertical scrollbar use overflow-y
body {
overflow-y: scroll;
}
make a scrollbar always visible in a div - chrome
Just having the scrollbar visible will not allow you to react to the user trying to scroll down. So you will need to actually make the content flow outside of the area and detect the scroll.
Try this:
#scrollarea-invalid {
overflow-y: scroll;
height: 350px;
}
#scrollarea-content{
min-height:101%;
}
<div id='scrollarea-invalid'>
<div id='scrollarea-content'></div>
</div>
Making the main scrollbar always visible
html {
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
This makes the scrollbar always visible and only active when needed.
Update: If the above does not work then just using this may.
html {
overflow-y:scroll;
}
Related Topics
Disable Blue Highlight When Touch/Press Object With Cursor:Pointer
Force HTML Content to Fit in Device Width With Wkwebview
How to Set Input Field With Current Date in Angular
Html and CSS Are Not Linking/ Communicating
Space Between Navbar and the Content
How to Make My Website Fit Any Screen Size
How to Change the Time Format (12/24 Hours) of an <Input>
Html/Javascript One Click Print (No Dialogs)
How to Make a Gap Between Two Div Within the Same Column
Making Div Visible or Invisible Depend on Condition
Html - How to Scroll Vertical in Select Box
How to Click a Button on a Website Using Puppeteer Without Any Class, Id ,... Assigned to It
How to Align Anchor Tag With Button in Center
How to Properly Escape Quotes Inside HTML Attributes
Angular (Typescript): How to Set Option of Selected to 'Selected' If Two-Way Binded
How to Display on HTML Page in Another HTML Page in Angular 4