Geek asks and answers

Android scrollbar

I use the property -webkit-scrollbarto display scrollbars on iOS and Android, but when I scroll the container on an Android device, the content flickers according to the width of the scrollbar.

How can i solve this?

#container {
    width: 200px;
    height: 200px;
    overflow-y: auto;
}

::-webkit-scrollbar {
    width: 5px; 
}

::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar-thumb {
    margin-right: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.5);
}
+3
source share
1 answer

This can be done using a bit of Javascript.

<script>
    // Add a .touch or .no-touch class to <html> based on device capability
    document.documentElement.setAttribute('class',
        'ontouchend' in document ? 'touch' : 'no-touch');
</script>

(make sure this line is placed before CSS - desktop browsers will not style CSS otherwise.)

Pre-fix with the ::webkit-scrollbar-*class .no-touchto make sure that only non-touch devices get the scroll bar style, but Android doesn't.

.no-touch ::-webkit-scrollbar {
    width: 5px; 
}
.no-touch ::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.5);
}
/* ... etc */

. Touch .

0

More articles:


All Articles