A Quick Test of Scroll Snap


by Jeremy Caudle
code

After doing a bit of reading and watching a video on scroll-snap, I thought I'd try it out. I'm reusing 99% of yesterday's post, but somedays that may just be how things go.

How well is this going to work? I'm going solely off what I can remember and VS Code's autofill. I'll give this another go some other day with more reliable and better methods.

Slide One

⇚ Back to the beginning

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium consequat nunc quis ornare. Nunc consectetur blandit nunc eu imperdiet. Duis vitae leo justo. Praesent et posuere ante. Mauris vitae ante id tellus lacinia pulvinar.

Slide Two

⇚ Back to the beginning

Mauris sed nisl dui. Vestibulum ut nulla volutpat, porta nisi vel, hendrerit tortor. Aenean sagittis vehicula arcu, ac blandit dolor. Vestibulum et leo vel quam faucibus ultricies.

Slide Three

⇚ Back to the beginning

Donec libero risus, malesuada a enim finibus, elementum tempor nisl. Donec faucibus hendrerit leo, nec dictum nisl accumsan sed. Fusce vestibulum sodales nulla, eget gravida lectus lacinia et.

Slide Four

⇚ Back to the beginning

Proin diam nisl, rhoncus at dolor sed, condimentum imperdiet felis. Donec venenatis eros et massa suscipit, ac congue neque volutpat. Phasellus maximus augue at iaculis consectetur.

View the code:

HTML and JS
<section class="code-block">
            <nav class="nav-block" id="#nav">
                <a href="#slide-one">One</a>
                <a href="#slide-two">Two</a>
                <a href="#slide-three">Three</a>
                <a href="#slide-four">Four</a>
            </nav>
            <div id="intro">
                <p>How well is this going to work? I'm going solely off what I can remember and VS Code's autofill. I'll give this another go some other day with more reliable and better methods.
            </div>
            <div id="slide-one">
                <h1>Slide One</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pretium consequat nunc quis ornare. Nunc consectetur blandit nunc eu imperdiet. Duis vitae leo justo. Praesent et posuere ante. Mauris vitae ante id tellus lacinia pulvinar.</p>
            </div>
            <div id="slide-two">
                <h1>Slide Two</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Mauris sed nisl dui. Vestibulum ut nulla volutpat, porta nisi vel, hendrerit tortor. Aenean sagittis vehicula arcu, ac blandit dolor. Vestibulum et leo vel quam faucibus ultricies. </p>
            </div>
            <div id="slide-three">
                <h1>Slide Three</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Donec libero risus, malesuada a enim finibus, elementum tempor nisl. Donec faucibus hendrerit leo, nec dictum nisl accumsan sed. Fusce vestibulum sodales nulla, eget gravida lectus lacinia et. </p>
            </div>
            <div id="slide-four">
                <h1>Slide Four</h1>
                <p><a href="#intro">&lAarr; Back to the beginning</a></p>
                <p class="columns">Proin diam nisl, rhoncus at dolor sed, condimentum imperdiet felis. Donec venenatis eros et massa suscipit, ac congue neque volutpat. Phasellus maximus augue at iaculis consectetur. </p>
            </div>

        </section>
CSS
section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                margin: 1rem auto;
                background-color: #eee;
                min-height: 400px;
                overflow-x: auto;
								overflow-y: hidden;
                scroll-snap-type: block mandatory;
                position: relative;
                max-width: 60em;
            }
            .nav-block {
                display: block;
                min-height:1rem;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 2;
                writing-mode: vertical-lr;
                padding: .5rem;
            }
            .nav-block a {
                display: inline-block;
                padding: .5rem .25rem;
                text-decoration: none;
                font-weight: bold;
                margin: .25rem;
                color: white;
            }

            .nav-block a:hover, .nav-block a:focus {
                background-color: rgba(0,0,0,0.25);
            }

            .code-block div {
                display: block;
                scroll-snap-align: center;
                width:100%;
                min-height: 400px;
                height: 100%;
                background: gray;
                padding: 1em;
                position: absolute;
                top:0;
            }

            .code-block div > h1, .code-block div > p > a {
                transition: all .75s ease-out;
                text-decoration: none;
            }
						
						.code-block div > h1 {
font-size: 1.25 rem;
}
            
            .code-block div:target > h1 {
                transform: translateY(-5px);
                color: orange;
            }

            .code-block div:target > p > a {
                color: #333;
            }

            #intro {
                background-image: linear-gradient(90deg, red, gray);
                padding-left: 4rem;
                color: white;
                font-weight: bold;
                font-size: 1.5rem;
            }

            #slide-one {
                left: 100%;
            }
            #slide-two {
                left: 200%;
            }
            #slide-three {
                left: 300%;
            }
            #slide-four {
                left: 400%;
            }
            .columns {
                columns: 2;
                column-gap: .5rem;
                font-family: Georgia, 'Times New Roman', Times, serif;
                color: #dedede;
                font-size: 1.25rem;
                line-height: 1.5;
            }