如何使滚动条始终可见

Question

I want to make the scrollbar always visible. The problem is that I see it in chrome and safari, but not on Iphone and in mozilla.

I have next code

<div class="scrollbar">
   Scrollable content
</div>

and the css code is as follows:

/* Scroll thumb styles */
.scrollbar::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 100%;
    height: 2px;
}
.scrollbar::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}

On Android devices or in Chrome and Safari on desktop I see something as follows:

But on Iphone safari I do not see it:

I see it when I start to scroll and it has default styling.

Any idea?

Answer 1

to make both scrollbars always visible use overflow: scroll, make only x-axis scrollbar visible use overflow-x and overflow-y for y-axis. use overflow: auto when you want to display the scrollbar when there is content larger then the container

Answer 2

Change width: 100% to width: 7px will work

::-webkit-scrollbar {
    background-color: #f5f5f5;
    border-radius: 10px;
    width: 7px;
    height: 2px;
}
::-webkit-scrollbar-thumb {
    background-color: #000000;
    border-radius: 10px;
}