Hide useless scrollbars that show up on Windows only
Change your scroll to:
overflow-y: auto;
Setting it to auto
will display the scrollbar if its needed only, while scroll
suggests there should always be a scrollbar.
You can play around with different overflow
propertys using this example or read more about it at the w3schools.
–
Although you could consider using the -ms-overflow-style
property, which you can find in the windows dev center:
-ms-overflow-style: auto | none | scrollbar | -ms-autohiding-scrollbar
In Windows, the scroll bar is not hidden automatically. To show the scroll bar only when needed and when the user hovers the mouse over the element, you can use the css shown in the following snippet:
.myContainer {
overflow-y: hidden !important;
}
.myContainer:hover {
overflow-y: auto !important;
}
<div class="myContainer" style="width:150px;height:150px">
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
<ul>hover me</ul>
</div>