How to Ensure Scrollbars are Always Visible in Mobile Browsers?

How to Display a Scrollbar in Mobile Browsers

Despite CSS properties like "overflow:auto" and "overflow:visible" revealing scrollbars on desktop browsers, mobile browsers often conceal them until scrolling begins. This article addresses how to make scrollbars consistently visible on mobile devices, even without using ineffective jQuery libraries.

Consider the following HTML and CSS code:

<div>

#wrapper {
    overflow: scroll;
    -webkit-overflow-scrolling: touch;
    width: 500px;
    height: 200px;
}

#frameContent {
    width: 100%;
    height: 100%;
}

To make the scrollbar always visible on mobile devices, add the following CSS:

::-webkit-scrollbar {
    -webkit-appearance: none;
}

::-webkit-scrollbar:vertical {
    width: 12px;
}

::-webkit-scrollbar:horizontal {
    height: 12px;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .5);
    border-radius: 10px;
    border: 2px solid #ffffff;
}

::-webkit-scrollbar-track {
    border-radius: 10px;
    background-color: #ffffff;
}

This code, specific to the WebKit browser engine, modifies the scrollbar's appearance, ensuring its visibility on mobile devices.

The above is the detailed content of How to Ensure Scrollbars are Always Visible in Mobile Browsers?. For more information, please follow other related articles on the PHP Chinese website!