css 滚动条scrollbar-thumb美化,可能会引起微信闪退

原创已于 2022-09-29 11:23:02 修改 · 473 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #微信 #css3 #css条纹渐变微信闪退

于 2021-12-17 16:40:57 首次发布

css及js相关专栏收录该内容

61 篇文章

订阅专栏

本文探讨了使用特定CSS样式对微信内置浏览器中滚动条进行美化时导致的闪退现象，并提出了一个较为稳妥的解决方案。

类似下面的用法,在对表格左右滚动条美化时,会引起微信访问网页的闪退问题.

/*滚动条里面的滑块*/
.list3 .tz  table::-webkit-scrollbar-thumb,.list3 .ms  table::-webkit-scrollbar-thumb  {
background: linear-gradient(to right,
     red 20%, orange 21% 40%, yellow 41% 61%, green 61% 81%, blue 81%);
     /*这句可能引起微信网页闪退,特别是渲染大段的表格内容的底滚动条时.*/
     
****background: url(tiaowen.jpg)  center  repeat-x;/*用图片背景替换,也一样闪退.*/
    
/*建议设置为纯色*/
background: #ec6941;
background-clip: padding-box;

-webkit-border-radius:5px;

-moz-border-radius: 5px;

border-radius: 5px;

min-width: 30px;

}

.list3 .tz  table::-webkit-scrollbar-track,.list3 .ms  table::-webkit-scrollbar-track {
/*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        border-radius: 10px;
       background-color: gray;
    }