overflow-y 的样式：scroll； mobile/tablet 上未显示

Question

我有一个基于浏览器的移动应用程序，我想突出显示某个部分中的垂直滚动条。 mobile/tablet 的默认垂直滚动样式非常微妙，许多用户忽略了此部分的向下滚动。

我在下面展示了我的代码，它在 Google 的移动设备开发工具中运行良好，但是当我在真实的移动设备上测试它时，显示了我的 none 样式，只有默认样式mobile/tablet 垂直滚动样式。

如何使我的代码适用于移动设备？

谢谢！！！

<style>
    .introText{ 
      width:400px;
      height:200px;
      overflow-y: scroll;
    
        scrollbar-face-color: #367CD2;
        scrollbar-shadow-color: #FFFFFF;
        scrollbar-highlight-color: #FFFFFF;
        scrollbar-3dlight-color: #FFFFFF;
        scrollbar-darkshadow-color: #FFFFFF;
        scrollbar-track-color: #FFFFFF;
        scrollbar-arrow-color: #FFFFFF;
    }
    
    /* scroll started */
    .introText::-webkit-scrollbar {
        width: 12px;
    }
     
    /* Track */
    .introText::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
        -webkit-border-radius: 10px;
        border-radius: 10px;
    }
     
    /* Handle */
    .introText::-webkit-scrollbar-thumb {
        -webkit-border-radius: 10px;
        border-radius: 10px;
        background: rgba(255,0,0,0.8); 
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
    }
</style>


    <div class="introText">
        <p>
            "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
        </p>
        <p>
            <h5>Another</h5>
    
    "At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
        </p>
    <div>

https://codepen.io/lleoun/pen/abEyZwG

Answer 1

并非所有浏览器都支持您尝试使用的 webkit 属性。您可以检查兼容性 here

overflow-y 的样式：scroll； mobile/tablet 上未显示

Styles for overflow-y: scroll; not shown on mobile/tablet

css

mobile

scroll

scrollbar

overflow