Task at hand requires me to customize the scrollbar style on my HTML page. Below is the CSS code I am using:
.txt_Content::-webkit-scrollbar {
width:5px;
border-radius:4px;
}
.txt_Content::-webkit-scrollbar-button {
display: none;
}
.txt_Content::-webkit-scrollbar-track {
background:#e5e2ad;
border-radius:4px;
}
.txt_Content::-webkit-scrollbar-track-piece {
background:#e5e2ad;
border-radius:4px;
border: 1px solid #c5b481;
}
.txt_Content::-webkit-scrollbar-thumb{
background:#fbfae3;
border-radius:4px;
border: 1px solid #c5b481;
}
.txt_Content::-webkit-scrollbar-corner {
border-radius:4px;
}
.txt_Content::-webkit-resizer {
display: none;
}
Here's an example of how I'm implementing it in my HTML:
<div class="txt_border">
<img src="../image/txt_border2.png">
<ul class="txt_Content">
<li class="biaoqian">
<div></div>
<div>
<p>txtxt</p>
<p>txtxtxt</p>
</div>
</li>
<!---->
</ul>
</div>
The custom scrollbar looks great in Chrome on Mac and Android devices:
However, it does not work on iPhone:
Could there be an issue with my code? Or perhaps mobile Safari does not support CSS3?