A demonstration of two ways to horizontally scroll content within a container div. One uses inline-block and the other uses flexbox.
A Pen by Colin Lord on CodePen.
Last active
June 1, 2019 05:59
-
-
Save PrinceYoulou/6542e038001972066ba6a014a28b3e98 to your computer and use it in GitHub Desktop.
Smooth Horizontal Scrolling
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
| <!DOCTYPE html> | |
| <html lang="en" dir="ltr"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Horizontal scroller</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <main> | |
| <header> | |
| <h1>Smooth Horizontal Scrolling</h1> | |
| </header> | |
| <section class="content"> | |
| <p>In the era of responsive design, often times we will have a series of card-like divs. While we may show them all on desktop, on mobile things tend to be different. What if we want to have an inner container where the user scrolls left and right to view each card? How do we achieve that?</p> | |
| <p>Here's a demo. There are more cards to the right that can be scrolled to.</p> | |
| <div class="scrolling-wrapper"> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| </div> | |
| <p>To make this, we need to create a container that holds our cards. Then we will enable horizontal scrolling on that container.</p> | |
| <p>The <code>overflow-x</code> and <code>overflow-y</code> enable the div to only scroll horizontally. The combination of <code>white-space: nowrap</code> and <code>display: inline-block</code> will neatly line up the cards.</p> | |
| <p>We can also use Flexbox to achieve the same result.</p> | |
| <p>The result is the same. We have all our cards on a single line and they are scrollalble left to right.</p> | |
| <div class="scrolling-wrapper-flexbox"> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| <div class="card"><h2>Card</h2></div> | |
| </div> | |
| <p>On iOS, you want to add <code>-webkit-overflow-scrolling: touch;</code> to your scroll container. By default, Safari will not smoothly scroll these elements.</p> | |
| <p>I wrote a <a href="https://codepen.io/colinlord/post/horizontal-scrolling-containers" >blog post</a> on this topic if you want to learn more.</p> | |
| </section> | |
| </main> | |
| </body> | |
| </html> |
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
| <script src="//production-assets.codepen.io/assets/embed/ei.js"></script> |
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
| h2 { | |
| color: white; | |
| } | |
| .scrolling-wrapper { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| white-space: nowrap; | |
| } | |
| .scrolling-wrapper .card { | |
| display: inline-block; | |
| } | |
| .scrolling-wrapper-flexbox { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| } | |
| .scrolling-wrapper-flexbox .card { | |
| flex: 0 0 auto; | |
| margin-right: 3px; | |
| } | |
| .card { | |
| border: 2px solid red; | |
| width: 150px; | |
| height: 75px; | |
| background: black; | |
| } | |
| .scrolling-wrapper, .scrolling-wrapper-flexbox { | |
| height: 80px; | |
| margin-bottom: 20px; | |
| width: 100%; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .scrolling-wrapper::-webkit-scrollbar, .scrolling-wrapper-flexbox::-webkit-scrollbar { | |
| display: none; | |
| } | |
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
| h2 { | |
| color: $white; | |
| } | |
| .scrolling-wrapper { | |
| overflow-x: scroll; | |
| overflow-y: hidden; | |
| white-space: nowrap; | |
| .card { | |
| display: inline-block; | |
| } | |
| } | |
| .scrolling-wrapper-flexbox { | |
| display: flex; | |
| flex-wrap: nowrap; | |
| overflow-x: auto; | |
| .card { | |
| flex: 0 0 auto; | |
| margin-right: 3px; | |
| } | |
| } | |
| .card { | |
| border: 2px solid $red; | |
| width: 150px; | |
| height: 75px; | |
| background: black; | |
| } | |
| .scrolling-wrapper, .scrolling-wrapper-flexbox { | |
| height: 80px; | |
| margin-bottom: 20px; | |
| width: 100%; | |
| -webkit-overflow-scrolling: touch; | |
| &::-webkit-scrollbar { | |
| display: none; | |
| } | |
| } |
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
| <link href="//fonts.googleapis.com/css?family=Oswald" rel="stylesheet" /> | |
| <link href="//fonts.googleapis.com/css?family=Roboto" rel="stylesheet" /> | |
| <link href="https://codepen.io/colinlord/pen/db9ba42a2fd1bb4ad3b2c4898897abea" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Here's s the CSS version compiled
h2 { color: white; } .scrolling-wrapper { overflow-x: scroll; overflow-y: hidden; white-space: nowrap; } .scrolling-wrapper .card { display: inline-block; } .scrolling-wrapper-flexbox { display: flex; flex-wrap: nowrap; overflow-x: auto; } .scrolling-wrapper-flexbox .card { flex: 0 0 auto; margin-right: 3px; } .card { border: 2px solid red; width: 150px; height: 75px; background: black; } .scrolling-wrapper, .scrolling-wrapper-flexbox { height: 80px; margin-bottom: 20px; width: 100%; -webkit-overflow-scrolling: touch; } .scrolling-wrapper::-webkit-scrollbar, .scrolling-wrapper-flexbox::-webkit-scrollbar { display: none; }