Skip to content

Instantly share code, notes, and snippets.

@Linhieng

Linhieng/webkit滚动条不贴边效果.html

Last active November 2, 2023 13:34
Show Gist options
  • Save Linhieng/650df407c2f6791b1fbfe6728c12cba4 to your computer and use it in GitHub Desktop.
Save Linhieng/650df407c2f6791b1fbfe6728c12cba4 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
webkit滚动条不贴边效果.html
<body>
<main class="scroll-wrapper__not_edge"><div class="content"></div></main>
</body>
<style>
.scroll-wrapper__not_edge {
--scroll-transparent-bg: white;
--scroll-color: skyblue;
--scroll-background-side: 200px;
--scroll-thumb-side: 100px;
box-sizing: border-box;
overflow: scroll;
}
.scroll-wrapper__not_edge::-webkit-scrollbar {
width: var(--scroll-background-side);
height: var(--scroll-background-side);
background-color: var(--scroll-transparent-bg);
}
.scroll-wrapper__not_edge::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 0
calc(
calc(var(--scroll-background-side) - var(--scroll-thumb-side)) /
2
)
var(--scroll-transparent-bg);
background-color: var(--scroll-color);
border-radius: var(--scroll-thumb-side);
}
main {
width: 100vw;
height: 100vh;
}
body {
margin: 0;
padding: 0;
background-color: black;
}
.content {
width: 5000px;
height: 2000px;
background: var(--bg-linear-gradient);
}
:root {
--bg-linear-gradient: linear-gradient(
217deg,
rgba(255, 0, 0, 0.8),
rgba(255, 0, 0, 0) 70.71%
),
linear-gradient(
127deg,
rgba(0, 255, 0, 0.8),
rgba(0, 255, 0, 0) 70.71%
),
linear-gradient(
336deg,
rgba(0, 0, 255, 0.8),
rgba(0, 0, 255, 0) 70.71%
);
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment