A Pen by Pieter Biesemans on CodePen.
Created
April 12, 2017 00:39
-
-
Save dmirtyisme/2df3c397aea8f6a10cea229e63fe1d37 to your computer and use it in GitHub Desktop.
Horizontal scroll (simple example)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="horizontal-scroll-wrapper squares"> | |
<div>item 1</div> | |
<div>item 2</div> | |
<div>item 3</div> | |
<div>item 4</div> | |
<div>item 5</div> | |
<div>item 6</div> | |
<div>item 7</div> | |
<div>item 8</div> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
This Codepen is in the Public Domain. | |
You can use it for whatever purpose you like, except evil. | |
*/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$finalHeight: 250px; | |
$finalWidth: 3 * $finalHeight; | |
$scrollBarHeight: 1px; | |
::-webkit-scrollbar { | |
width: $scrollBarHeight; | |
height: $scrollBarHeight; | |
} | |
::-webkit-scrollbar-button { | |
width: $scrollBarHeight; | |
height: $scrollBarHeight; | |
} | |
body { | |
background: #111; | |
} | |
div { | |
box-sizing: border-box; | |
} | |
.horizontal-scroll-wrapper { | |
position: absolute; | |
display: block; | |
top: 0; | |
left: 0; | |
width: calc(#{$finalHeight} + #{$scrollBarHeight}); | |
max-height: $finalWidth; | |
margin: 0; | |
padding-top: $scrollBarHeight; | |
background: #abc; | |
overflow-y: auto; | |
overflow-x: hidden; | |
transform: rotate(-90deg) translateY(-$finalHeight); | |
transform-origin: right top; | |
& > div { | |
display: block; | |
padding: 5px; | |
background: #cab; | |
transform: rotate(90deg); | |
transform-origin: right top; | |
} | |
} | |
.squares { | |
padding: $finalHeight 0 0 0; | |
& > div { | |
width: $finalHeight; | |
height: $finalHeight; | |
margin: 10px 0; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment