Sitemap
Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://hub.samsunginter.net/about-blog

Horizontally Scrolling Panes with clean HTML, modern CSS and no JS

4 min readMar 11, 2020

--

3 Pages laid out horizontally

Step 1

<body>
<header>
<h1>The Pink Paper</h1><h2>It's Salmon Actually</h2>
</header>
<nav><ul>
<li><a href="#article1">Article 1</a></li>
<li><a href="#article2">Article 2</a></li>
<li><a href="#article3">Article 3</a></li>
</ul></nav>
<main>
<article id="article1">Some content</article>
<article id="article2">Some content</article>
<article id="article3">Some content</article>
</main>
</body>

Step 2

html,body {
width: 100%;
height
: 100%;
margin: 0;
}
body {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: min-content min-content 1fr;
}
main {
display: grid;
grid-template-rows: 1fr;
grid-auto-flow: column;
grid-auto-columns: 100%;
}

Step 3

main {
...
overflow-x: scroll;
scroll-snap-type: x mandatory;
}
main > article {
scroll-snap-align: start;
scroll-snap-stop: always;
}

To Read Next

Final Code & Demo

--

--

Samsung Internet Developers
Samsung Internet Developers

Published in Samsung Internet Developers

Writings from the Samsung Internet Developer Relations Team. For more info see our disclaimer: https://hub.samsunginter.net/about-blog

Ada Rose Cannon
Ada Rose Cannon

Written by Ada Rose Cannon

Co-chair of the W3C Immersive Web Working Group, Developer Advocate for Samsung.

Responses (1)