Source code
Revision control
Copy as Markdown
Other Tools
<!DOCTYPE html>
<title>View Transitions: custom scrollbar (ref)</title>
<link rel="author" href="mailto:bokan@chromium.org">
<style>
.old {
width: 50vw;
height: 100vh;
position: fixed;
left: 0px;
top: 0px;
background: blue;
}
.new {
width: 50vw;
height: 100vh;
position: fixed;
left: 50vw;
top: 0px;
background: grey;
}
html {
overflow: scroll;
}
@layer {
::-webkit-scrollbar {
background-color: hsl(0, 100%, 10%);
color: hsl(0, 100%, 90%);
}
::-webkit-scrollbar-thumb {
background-color: hsl(0, 100%, 50%);
}
::-webkit-scrollbar-corner {
background-color: hsl(0, 100%, 0%);
}
}
</style>
<div class="old"></div>
<div class="new"></div>