Skip to content

Instantly share code, notes, and snippets.

@Linhieng

Linhieng/webkit滚动条可配置样式.html

Created November 2, 2023 13:23
Show Gist options
  • Save Linhieng/4ec430f17eb3eeac8ea2bb23b57e7b1b to your computer and use it in GitHub Desktop.
Save Linhieng/4ec430f17eb3eeac8ea2bb23b57e7b1b to your computer and use it in GitHub Desktop.
Download ZIP
丑，但很容易看出样式的效果
Raw
webkit滚动条可配置样式.html
<body>
<main><div></div></main>
</body>
<style>
div {
width: 2000px;
height: 2000px;
background: linear-gradient(45deg, #e66465, #9198e5);
}
main {
width: 1200px;
height: 1000px;
overflow: auto;
}
main::-webkit-scrollbar {
width: 200px;
height: 200px;
}
main::-webkit-scrollbar-thumb {
border-radius: 50%;
box-shadow: inset 0 0 0 20px blue;
background-color: purple;
}
main::-webkit-scrollbar-track {
border-radius: 10px;
background-color: green;
box-shadow: inset 0 0 0 20px red;
}
main::-webkit-scrollbar-track-piece {
border-radius: 50%;
background-color: darkcyan;
box-shadow: inset 0 0 0 20px cyan;
}
main::-webkit-scrollbar-button {
width: 100px;
height: 100px;
background-color: black;
box-shadow: inset 0 0 0 10px red;
border-radius: 50px;
}
main::-webkit-scrollbar--corner {
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment