In the earlier lesson, we showed you how you can scroll contents of an element and how you can reset
it again back to the zero position.
So this is obviously hard to read if you go over it.
And typically, whenever the mouse is over, the scrolling should actually stop.
So let's add that into our application.
We're going to add in a variable that's going to control the scrolling and also turn it on and off as
needed.
So this is going to be a variable that's going to sit within the global scope.
We can call it scroller.
Just set it to true and make sure that before we're actually scrolling, that scroller is set to true
so we can check to see if scroller and if scroller exists, then we're good to go and update that content.
And if not, then we're not going to be updating the scroller so that our output isn't changing.
So now we have a variable that we can toggle and we can detect to see if the element has a mouse over.
So if the main container has a mouse over that, we want to stop the scroll from happening.
So selecting that element, we can select it because we've already touched it as an object within our
JavaScript.
So it's the container, the C element.
So selecting our C element, we're adding an event listener and the event listener is going to be on
mouse enter.
So we'll update the scroll speed.
We'll create a function in order to do that.
And we also wanted to add in another event listener.
So this is going to be on mouse leave that whenever the mouse leaves that particular element.
So using our console log, we're going to use the E type variable.
So the E is the object, the element that triggers the event.
And we can tell what type of event was triggered by listing out the type.
I'm also going to get rid of the console message.
So we don't constantly have console messages flooding our console, shrink this down a bit and refresh.
So we see that we've got mouse, enter, mouse, leave, mouse, enter, mouse, leave.
So that's exactly what we want to happen.
And now we can use our type to check to see if our scroller and setting are scroller, either to true
or false.
So taking our E type, we're using a territory operator and seeing if it's mouse enter and if it is
mouse enter, then let's set it to false and the effects will be immediately seen because this is a
variable that's a global variable.
So if we're setting it to false, it's going to and we always have this interval running.
So if as soon as it goes to false, it's going to stop running.
So you see that whenever we enter now the scrolling stops and then it resumes once we leave that particular
element.
And you can also update the output, the inner HTML stopper.
So our output to the to the user that we've got the mouse stopper.
So the scrolling has stopped and whenever we're over, we see the message there, mouse stopper.
Whenever we leave, the scrolling commences again.
So go ahead and add this into your application.
The ability to stop and start the scroll and you can add in the event listeners for mouse enter and
mouse leave to toggle that to either true or false.