Making the Main Scrollbar Always Visible

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

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.

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 - 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 to make scrollbar always visible in angular material?

So I found a work around, I need to include pseudo class to my CSS

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}
::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

And if you need it to a specific element or container

.selectionTable::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}

.selectionTable::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

Reference:

Making the main scrollbar always visible

Apply webkit scrollbar style to specified element

Making the Main Scrollbar Always Visible

Making the main scrollbar always visible

How to always show the vertical scrollbar in a browser?

make a scrollbar always visible in a div - chrome

Making the main scrollbar always visible - without scroll

Why is the vertical scrollbar always visible

How to make scrollbar always visible in angular material?

Related Topics

Leave a reply