.poem {
overflow: scroll;
scrollbar-color: red orange;
scrollbar-width: thin;
white-space: wrap;
height: 140px;
width: 140px;
}
<p class="poem">abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz
abcdefghjkilmopqrstuvwxyz abcdefghjkilmopqrstuvwxyz </p>
根据MDN滚动链接,我看不到红色拇指和橙子轨道的薄滚动条,所以在我的EDGE版本113浏览器中,我尝试了代码片段,但我也看不到我的EDGE浏览器中的thin scrollbar with a red thumb and an orange track
。请帮助我的代码错误,如果有的话。
3条答案
按热度按时间bn31dyow1#
这是设置元素滚动条样式的一种方法。试试这个:-
根据MDN Web Docs:
“::-webkit-scrollbar仅在基于Blink和WebKit的浏览器中可用”
你可以看到**::-webkit-scrollbar有很好的浏览器支持:-
https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar#browser_compatibility
对于scrollbar-color**,浏览器支持不好:-
https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color#browser_compatibility
希望对大家有帮助。
hgtggwj02#
您所做的一切都是正确的,只是
scrollbar-color
属性在所有浏览器中都不受支持。基本上只有Firefox支持这个。在Firefox中打开此问题,您的演示按预期工作。您可以在此页面底部查看浏览器对此属性的支持:https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-color
svmlkihl3#
语法是正确的,只是不支持你的浏览器。滚动条颜色:红橙子滚动条宽度:Thin;仅支持Firefox。尝试使用