Drew Learns how to make
A scroll to accept page

We are going to Learn about Scroll events

You will want to review the HTML of the Codepen at the bottom of this screen

Let's establish our "Sudo Code"


//variables
//function that the observer turns on or off
//if the last element is on the screen set disabled = false
//create the observer
//observe

Variables

We need to create our constants

First, let's select our "terms-and-conditions" class (it's the box you are reading). const terms = document.querySelector('.terms-and-conditions');

The only other element we care about is that button, let's select that. const button = document.querySelector('.accept');

Create a function that an observer will turn on or off

Let's take this in baby steps.
function observerCallback(event){};

I'm not writing all this out tonight in a text editor so I'm just going to send you to the code pen

Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam debitis fuga ratione velit praesentium fugit dolorem, ab odit libero perferendis eligendi eaque assumenda dignissimos tenetur facilis rerum quo omnis exercitationem delectus voluptas harum incidunt? Impedit eum nisi, consectetur earum, at laborum debitis velit reprehenderit cum sint ab fugiat? Vero quo, nulla repellendus vitae rem dolore hic veniam eligendi non, molestiae unde possimus id inventore quam commodi expedita animi eius amet delectus libero nihil. Repellat sit dolorem animi veniam perferendis cupiditate minus nisi distinctio.

lorem some more Lorem ipsum dolor sit amet consectetur, adipisicing elit. Repellendus animi cum maiores blanditiis distinctio deleniti minima culpa explicabo dolorum dicta voluptate iure officiis, quo, laborum quaerat aspernatur eius at aut facilis ducimus quas quae doloremque! Quam esse earum, laboriosam unde aspernatur molestiae quod cum magni natus ipsum itaque veritatis maiores rerum non accusamus autem asperiores nulla ab, libero hic consequatur quae. Eveniet repellendus, commodi, doloribus sequi distinctio voluptatem, sapiente harum unde excepturi ab reiciendis minus magni voluptate voluptatum. Necessitatibus magni optio autem quod eius voluptates ratione sequi ipsum laudantium esse sint consequatur, aspernatur velit rem non modi asperiores quidem atque dignissimos saepe nobis maiores at? Temporibus vero, id voluptate placeat laborum quibusdam non facilis eum natus ipsa unde est neque ab itaque tempore? Sit, similique. Dolores praesentium est adipisci modi maxime culpa magnam maiores itaque necessitatibus, facilis numquam fuga magni nesciunt, officiis alias quidem iusto aspernatur! Iste, veritatis quis eveniet hic placeat eius doloremque magni architecto. Eius voluptatem quas facilis eos dolore. Tenetur, similique laudantium repellat harum minus odio consequatur nulla officia ut architecto rerum modi alias sint facilis excepturi obcaecati. Nesciunt veritatis molestiae optio aperiam quaerat culpa consectetur, expedita officiis pariatur modi et, laborum cupiditate deleniti velit non beatae!



See the Pen VwYygGd by Drew (@DrewLearns) on CodePen.