| .wrap | |
| - for (var i = 0; i < 17; i++) | |
| .scroll | |
| .scroll__content |
| // make them diagonal | |
| var scrolls = document.querySelectorAll('.scroll'); | |
| for (var i = 0; i < scrolls.length; i++) { | |
| scrolls[i].scrollTop = scrolls[i].offsetHeight*(i+0.5)/scrolls.length; | |
| } |
| @mixin iescroll($arrow, $face, $track, $threedlight, $highlight, $shadow, $darkshadow) { | |
| $edges: inset 1px 1px 0 0 $threedlight, inset -1px -1px 0 0 $darkshadow, inset 2px 2px 0 0 $highlight, inset -2px -2px 0 0 $shadow; | |
| $edges-inverted: inset 1px 1px 0 0 $darkshadow, inset -1px -1px 0 0 $threedlight, inset 2px 2px 0 0 $shadow, inset -2px -2px 0 0 $highlight; | |
| $arrow-top: inset -5px -6px 0 0 $face, inset 5px -6px 0 0 $face, inset 0px -7px 0 0 $arrow, inset -6px -7px 0 0 $face, inset 6px -7px 0 0 $face, inset 0px -8px 0 0 $arrow, inset -7px -8px 0 0 $face, inset 7px -8px 0 0 $face, inset 0px -9px 0 0 $arrow; | |
| $arrow-bottom: inset 5px 6px 0 0 $face, inset -5px 6px 0 0 $face, inset 0 7px 0 0 $arrow, inset 6px 7px 0 0 $face, inset -6px 7px 0 0 $face, inset 0 8px 0 0 $arrow, inset 7px 8px 0 0 $face, inset -7px 8px 0 0 $face, inset 0px 9px 0 0 $arrow; | |
| &::-webkit-scrollbar { | |
| width: 15px; | |
| } | |
| &::-webkit-scrollbar-track { | |
| background-color: $track; | |
| } | |
| &::-webkit-scrollbar-thumb { | |
| background-color: $face; | |
| -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); | |
| box-shadow: #{$edges}; | |
| } | |
| &::-webkit-scrollbar-button { | |
| background-color: $face; | |
| height: 15px; | |
| box-shadow: #{$edges}; | |
| &:start { | |
| box-shadow: #{$edges}, #{$arrow-top}; | |
| &:active { | |
| box-shadow: #{$edges-inverted}, #{$arrow-top}; | |
| } | |
| } | |
| &:end { | |
| box-shadow: #{$edges}, #{$arrow-bottom}; | |
| &:active { | |
| box-shadow: #{$edges-inverted}, #{$arrow-bottom}; | |
| } | |
| } | |
| } | |
| } | |
| body { | |
| margin: 10vh; | |
| overflow: hidden; | |
| background: whitesmoke; | |
| } | |
| .wrap { | |
| width: 100%; | |
| height: 100%; | |
| display: flex; | |
| justify-content: space-between; | |
| } | |
| .scroll { | |
| width: 16px; | |
| height: 80vh; | |
| overflow: auto; | |
| @include iescroll(black, gainsboro, whitesmoke, lightgrey, white, silver, black); | |
| &__content { | |
| height: 200%; | |
| } | |
| &:nth-child(2) { | |
| @include iescroll(crimson, thistle, snow, hotpink, white, orchid, purple); | |
| } | |
| &:nth-child(3) { | |
| @include iescroll(blue, powderblue, mintcream, lightskyblue, white, steelblue, midnightblue); | |
| } | |
| &:nth-child(4) { | |
| @include iescroll(black, white, whitesmoke, black, lightgrey, lightgrey, black); | |
| } | |
| &:nth-child(5) { | |
| @include iescroll(white, pink, white, palevioletred, white, white, palevioletred); | |
| } | |
| &:nth-child(6) { | |
| @include iescroll(forestgreen, greenyellow, honeydew, yellowgreen, yellow, springgreen, forestgreen); | |
| } | |
| &:nth-child(7) { | |
| @include iescroll(black, seashell, lavenderblush, lightpink, white, skyblue, lightslategrey); | |
| } | |
| &:nth-child(8) { | |
| @include iescroll(gold, coral, linen, orangered, gold, orangered, firebrick); | |
| } | |
| &:nth-child(9) { | |
| @include iescroll(lime, white, honeydew, white, chartreuse, chartreuse, white); | |
| } | |
| &:nth-child(10) { | |
| @include iescroll(black, red, ghostwhite, red, salmon, crimson, darkred); | |
| } | |
| &:nth-child(11) { | |
| @include iescroll(darkkhaki, lightyellow, floralwhite, lemonchiffon, yellow, yellow, olivedrab); | |
| } | |
| &:nth-child(12) { | |
| @include iescroll(cadetblue, white, azure, white, white, cadetblue, cadetblue); | |
| } | |
| &:nth-child(13) { | |
| @include iescroll(purple, plum, lavender, orchid, lavender, violet, indigo); | |
| } | |
| &:nth-child(14) { | |
| @include iescroll(seagreen, springgreen, white, mediumseagreen, white, white, mediumseagreen); | |
| } | |
| &:nth-child(15) { | |
| @include iescroll(white, steelblue, azure, white, steelblue, steelblue, white); | |
| } | |
| &:nth-child(16) { | |
| @include iescroll(white, deeppink, lavenderblush, deeppink, white, mediumvioletred, white); | |
| } | |
| &:nth-child(17) { | |
| @include iescroll(maroon, white, gold, maroon, white, white, white); | |
| } | |
| } |
Oh how I miss these IE scrollbars. It used to take 7 lines to achieve this effect, now it takes 27! How the intenet has fallen. Long live IE ✌️
👉 webkit only
ngl those box shadows took ages to figure out, still not quite sure how I achieved it. And yes, I did run out of ideas after 17.
A Pen by Anand prabhakar on CodePen.