Scroll Behavior Practice


by Jeremy Caudle
code

I originally wanted to try to do some interesting scrolling animation with this posts and layout a series of rectangles via Javascript that animated as the page was scrolled, but that’s far too much for about 10:30 PM on a Friday night. So I did a bit of scroll-behavior practice as a refresher and to double check how it looks and feels on an iPhone.

1. Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a felis blandit, vulputate nisi at, consectetur nisl. Nullam diam purus, consectetur nec nibh nec, tempor facilisis dui. Nulla pretium enim eros, vitae eleifend lectus ullamcorper vel. Sed sed porttitor leo. Donec maximus mi tortor, at hendrerit mi fringilla id. Mauris tempor mollis sapien vitae convallis. Mauris nec mi at leo condimentum viverra sit amet aliquet sapien. Nullam pharetra bibendum bibendum. Donec consectetur rhoncus felis aliquet vestibulum. Nulla eget odio quis eros aliquam faucibus et tristique tortor. Ut posuere scelerisque sagittis.

2. Words of Wisdom

Motivational quote from someone I admire and gain knowledge from.

— Merlin Mann - Episode 428 - Back To Work

3. Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a felis blandit, vulputate nisi at, consectetur nisl. Nullam diam purus, consectetur nec nibh nec, tempor facilisis dui. Nulla pretium enim eros, vitae eleifend lectus ullamcorper vel. Sed sed porttitor leo. Donec maximus mi tortor, at hendrerit mi fringilla id. Mauris tempor mollis sapien vitae convallis. Mauris nec mi at leo condimentum viverra sit amet aliquet sapien. Nullam pharetra bibendum bibendum. Donec consectetur rhoncus felis aliquet vestibulum. Nulla eget odio quis eros aliquam faucibus et tristique tortor. Ut posuere scelerisque sagittis.

View the code:

HTML and JS 
<div class="code-block">
                <nav>
                    <a href="#one">1</a> <a href="#two">2</a> <a href="#three">3</a>
                </nav>

                <div>

                <h2 id="one">1. Header</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a felis blandit, vulputate nisi at, consectetur nisl. Nullam diam purus, consectetur nec nibh nec, tempor facilisis dui. Nulla pretium enim eros, vitae eleifend lectus ullamcorper vel. Sed sed porttitor leo. Donec maximus mi tortor, at hendrerit mi fringilla id. Mauris tempor mollis sapien vitae convallis. Mauris nec mi at leo condimentum viverra sit amet aliquet sapien. Nullam pharetra bibendum bibendum. Donec consectetur rhoncus felis aliquet vestibulum. Nulla eget odio quis eros aliquam faucibus et tristique tortor. Ut posuere scelerisque sagittis.</p>

                <h2 id="two">2. Words of Wisdom</h2>
                <blockquote>
                    <p>Motivational quote from someone I admire and gain knowledge from.</p>
                    <p>— Merlin Mann - <cite>Episode 428 - Back To Work</cite></p>
                </blockquote>

                <h2 id="three">3. Header</h2>

                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla a felis blandit, vulputate nisi at, consectetur nisl. Nullam diam purus, consectetur nec nibh nec, tempor facilisis dui. Nulla pretium enim eros, vitae eleifend lectus ullamcorper vel. Sed sed porttitor leo. Donec maximus mi tortor, at hendrerit mi fringilla id. Mauris tempor mollis sapien vitae convallis. Mauris nec mi at leo condimentum viverra sit amet aliquet sapien. Nullam pharetra bibendum bibendum. Donec consectetur rhoncus felis aliquet vestibulum. Nulla eget odio quis eros aliquam faucibus et tristique tortor. Ut posuere scelerisque sagittis.</p>

            </div>
        </div>
CSS 
.code-block {
                font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
                background: black;
                background: var(--main-bg, black);
                width: 20em;
                margin: 0 auto;
                overflow: hidden;
                position: relative;
                padding: 1rem;
                z-index: 1;
                color: #999;
            }

            .code-block div {
                scroll-behavior: smooth;
                height: 20em;
                overflow: auto;
                margin: 1rem auto;
                padding: 1rem;
                border: solid 1px cyan;
                border-radius: .25rem;
                scrollbar-color: cyan;
                scrollbar-face-color: cyan;
            }

            nav {
                display: block;
                color: cyan;
                text-align: center;
                margin: 1rem 0;
            }

            nav a {
                color: cyan;
                padding: 1rem;
                border: solid 1px cyan;
                border-radius: .25rem;
                display: inline-block;
            }


            .code-block h2 {
                color: cyan;
            }

Tags