This lesson will do a quick code review we had to set up for our elements, we set up a little bit of
styling, so one so we could see the content as well as hiding the overflow.
We set up a whiteboard and a background color so we can distinguish the containing element from the
rest of our HTML page.
We also set the position of s element to be absolute set, its default left and a top position to zero
and as a width of one hundred percent.
So it takes up hundred percent available space within the container element, setting up some inputs.
We set up an input so that we can adjust the scrolling speed.
We set up an output with element with the class of output.
So this gives us a way to communicate with the user.
We have two different divs here, so we have a main container div and then the content contained within
that main container.
So this gives us the ability to make that main container bigger or smaller in height so we can adjust
it and then this element will automatically adjust and render out to the type.
So scroll within that main container element.
We also added in a button so that we can have some more advanced functionality within our application.
Next, we went through our JavaScript elements and we set them up as objects using the document object
model, selecting them from our HTML and bringing them into our JavaScript so they can make use of it.
We set up some variables.
One of the variables was very large, had a lot of content in it.
So that was our content element.
Next came to adding in our interaction.
So we have several different event listeners that we added in.
The first one is whenever the page loads that we're going to set up our scroll function.
So that's setting up our inner HTML, calculating our height and positioning and setting the default
starting position of our element and then also initiating the interval so that our scrolling starts
and it continuously runs this function every 50 milliseconds.
We also had several different event listeners.
We added one for the button.
So whenever we're clicking the button, we're toggled the variable of scroller versus a boolean value.
So it's either true or false.
And this is a quick and easy way to toggle values boolean values by doing the uptick.
So that's the shift six and also equals sine we also update the entire text of the button to be equal
to.
So whatever the value of scroller is, if it's true, it's going to be start.
If it's if it's false, it's going to be start because we negated it.
And if it's true, it's going to be stop.
We also added event listeners to adjust the scroll speed to invoke this function whenever the user enters
or leaves the container element.
And what happens here is we detect what the mouse type is using a ternary operator.
So we check to see if it's mouse enter and if it is mouse enter, then scroller Gosta false so that
it stops scrolling.
Same thing that we did up here where we set that value to false.
And if it's not mouse enter, then we're going to set it to Truc.
That's the territory operator.
We also update the inner HTML of the output to communicate with the user.
This is our set up function.
So this again where we set up all of the variables and set up positioning and initiate the interval.
And then once we've created that, this is where all our scrolling calculations come in, where we have
our scroll speed.
So we're getting our speed objects.
Remember, that's that input.
We're taking the value of that input.
We're updating the scroller.
So we're check we're checking to see if scroller is true or false.
If it's true that we know we can continue with their scrolling function.
And if it's false, then we're just going to skip over this and we're not going to do anything.
So we're not going to be doing any scrolling, checking to see calculating our current position.
So our current Y position of the element and remember, this one is always moving.
So it's grabbing that style position.
We have to apply parse integer.
Otherwise we end up with a string, with the extension of picks.
We check to see what the position y plus that element height is.
And if it's greater than zero because remember here we're subtracting, then we know we can continuously
subtract and we can adjust the scroll position, the position of the element by the scroll speed.
And if it's less than zero, then we know it's time to update our element, positioning it to dial top
and whatever the container is right to the bottom of that container.
And then we output the scroll speed and the Y position to the person that's viewing into the output
area.
And that's it.
So go ahead and build your own version of this application, try it out for yourself, extend on it,
have some fun with it and get familiar with working with JavaScript.
And so whenever we're on top of the great box, the scroll is going to stop.
We can also start and stop the scroll with the button and we can increase the scroll speed.
And you can see it's getting faster and we can also decrease the scroll speed.
So that makes it slower and that takes effect instantly.