Animated Scrollbar Colors

A progressive enhancement using CSS @property and Scroll-Driven Animations.
Scroll down slowly inside the box.

\n\n

Top (Pink)

Scroll down. As the container scrolls, the embedded CSS variable bound by animation-timeline: scroll(self) begins interpolating to Orange.

\n \n

\n\n

Middle (Orange)

The standard scrollbar-color property is technically non-animatable, but passing in an interpolated @property bypasses that limitation entirely, yielding a gorgeous color transition without a drop of JavaScript.

\n \n

\n\n

Bottom (Cyan)

You have reached the bottom! The CSS scroll timeline hits 100%, stabilizing the thumb color to a deep Cyan.

\n\n\n`;\n\n return new Response(html, {\n status: 200,\n headers: { \"Content-Type\": \"text/html; charset=utf-8\" },\n });\n}","deleted","label","colourful-scrollbar","children",[],[103],"files",[160],"counts",{"_185":33,"_186":187,"_188":33,"_189":190,"_193":194},"pulls","branches",1,"forks","envVars",{"_191":33,"_192":33},"count","emptyCount","connections",{"_191":33,"_195":33},"unfilledCount","contents",[],"file",{"_108":161,"_99":103,"_162":163,"_164":-5,"_165":148,"_166":105,"_167":168,"_110":200,"_104":170,"_171":172,"_173":174,"_175":22,"_176":177,"_102":201},["D",1771933132645],[103],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_97":98,"_99":100,"_101":45,"_104":105,"_102":103,"_106":210,"_158":215,"_181":220,"_198":221,"_196":224,"_225":-5,"_226":-5,"_227":-5,"_228":-5,"_229":230,"_189":-5},{"_108":109,"_99":100,"_110":211,"_112":-5,"_113":22,"_114":115,"_116":-5,"_117":-5,"_14":118,"_119":-5,"_120":22,"_121":-5,"_122":-5,"_123":33,"_16":124,"_125":-5,"_126":-5,"_127":-5,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_23":212,"_140":213,"_145":214,"_157":22},["D",1771933042112],{"_97":98,"_138":139},{"_97":98,"_142":139,"_14":118,"_143":144},{"_104":147,"_99":45,"_108":148,"_149":109,"_150":-5,"_151":-5,"_152":-5,"_153":-5,"_154":-5,"_155":100,"_156":98},[216],{"_108":161,"_99":103,"_162":163,"_164":-5,"_165":148,"_166":105,"_167":168,"_110":217,"_104":170,"_171":172,"_173":174,"_175":22,"_176":177,"_178":218,"_102":219},["D",1771933132645],[],[103],[216],{"_108":161,"_165":148,"_162":163,"_99":103,"_173":174,"_171":172,"_104":170,"_164":-5,"_110":222,"_166":105,"_176":177,"_102":223},["D",1771933132645],[103],[],"upstream","pull","ahead","behind","templates",[],"actionData","errors"]

paulkinlan

colourful-scroll-bar