Question

我有一些来自外部css文件的自定义滚动条样式，我没有任何控制权。

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

我想保留这个自定义滚动条样式，但在容器元素中覆盖它。我试图以不同的方式瞄准它而没有运气。

#test::-webkit-scrollbar { width: 10px !important; }

Answer 1

您正在body看到滚动条。你的div#test高2000像素导致身体溢出，因此身体会获得滚动条，但您的自定义样式会分配给没有溢出内容的div#test。

例如，这里div#test的高度减少，溢出设置为滚动，更多内容强制它的内容溢出并应用滚动条样式：

div{
    height:200px;
    overflow: scroll;
}

::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-thumb {
    background-color:#808080;
}

#test::-webkit-scrollbar {
    width: 10px !important;
}

#test::-webkit-scrollbar-thumb {
    background-color:red;
}

<div id="test">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum facilis odit animi exercitationem sint, laborum fugiat voluptatem alias, nesciunt accusamus amet, perferendis doloribus vel id illo, quae est ipsam libero. Quisquam fugit dignissimos fugiat repellat. Rem animi, inventore velit corporis, tempora minus excepturi reprehenderit vero deleniti eveniet fugiat. Eveniet, asperiores.</div>

如何仅覆盖子元素上的滚动条

1 个答案: