1
00:00:00,640 --> 00:00:07,210
In the earlier lesson, we showed you how you can scroll contents of an element and how you can reset

2
00:00:07,210 --> 00:00:08,990
it again back to the zero position.

3
00:00:09,250 --> 00:00:12,310
So this is obviously hard to read if you go over it.

4
00:00:12,460 --> 00:00:16,720
And typically, whenever the mouse is over, the scrolling should actually stop.

5
00:00:16,840 --> 00:00:18,970
So let's add that into our application.

6
00:00:19,180 --> 00:00:25,150
We're going to add in a variable that's going to control the scrolling and also turn it on and off as

7
00:00:25,150 --> 00:00:25,540
needed.

8
00:00:25,750 --> 00:00:29,650
So this is going to be a variable that's going to sit within the global scope.

9
00:00:29,800 --> 00:00:31,450
We can call it scroller.

10
00:00:31,630 --> 00:00:38,670
Just set it to true and make sure that before we're actually scrolling, that scroller is set to true

11
00:00:39,100 --> 00:00:47,220
so we can check to see if scroller and if scroller exists, then we're good to go and update that content.

12
00:00:47,230 --> 00:00:53,000
And if not, then we're not going to be updating the scroller so that our output isn't changing.

13
00:00:53,260 --> 00:00:59,920
So now we have a variable that we can toggle and we can detect to see if the element has a mouse over.

14
00:01:00,100 --> 00:01:05,180
So if the main container has a mouse over that, we want to stop the scroll from happening.

15
00:01:05,560 --> 00:01:12,310
So selecting that element, we can select it because we've already touched it as an object within our

16
00:01:12,850 --> 00:01:13,630
JavaScript.

17
00:01:13,660 --> 00:01:16,140
So it's the container, the C element.

18
00:01:16,660 --> 00:01:22,930
So selecting our C element, we're adding an event listener and the event listener is going to be on

19
00:01:22,930 --> 00:01:24,040
mouse enter.

20
00:01:24,280 --> 00:01:25,930
So we'll update the scroll speed.

21
00:01:25,930 --> 00:01:28,290
We'll create a function in order to do that.

22
00:01:28,810 --> 00:01:31,990
And we also wanted to add in another event listener.

23
00:01:32,260 --> 00:01:39,200
So this is going to be on mouse leave that whenever the mouse leaves that particular element.

24
00:01:39,250 --> 00:01:44,230
So using our console log, we're going to use the E type variable.

25
00:01:44,230 --> 00:01:48,100
So the E is the object, the element that triggers the event.

26
00:01:48,460 --> 00:01:53,330
And we can tell what type of event was triggered by listing out the type.

27
00:01:53,650 --> 00:01:55,990
I'm also going to get rid of the console message.

28
00:01:56,900 --> 00:02:03,890
So we don't constantly have console messages flooding our console, shrink this down a bit and refresh.

29
00:02:04,610 --> 00:02:08,500
So we see that we've got mouse, enter, mouse, leave, mouse, enter, mouse, leave.

30
00:02:08,990 --> 00:02:10,790
So that's exactly what we want to happen.

31
00:02:11,240 --> 00:02:20,360
And now we can use our type to check to see if our scroller and setting are scroller, either to true

32
00:02:20,360 --> 00:02:20,960
or false.

33
00:02:21,230 --> 00:02:28,460
So taking our E type, we're using a territory operator and seeing if it's mouse enter and if it is

34
00:02:28,520 --> 00:02:38,450
mouse enter, then let's set it to false and the effects will be immediately seen because this is a

35
00:02:38,450 --> 00:02:40,720
variable that's a global variable.

36
00:02:41,060 --> 00:02:46,840
So if we're setting it to false, it's going to and we always have this interval running.

37
00:02:47,180 --> 00:02:50,150
So if as soon as it goes to false, it's going to stop running.

38
00:02:50,160 --> 00:02:58,820
So you see that whenever we enter now the scrolling stops and then it resumes once we leave that particular

39
00:02:58,820 --> 00:02:59,210
element.

40
00:02:59,300 --> 00:03:03,350
And you can also update the output, the inner HTML stopper.

41
00:03:03,530 --> 00:03:07,310
So our output to the to the user that we've got the mouse stopper.

42
00:03:07,320 --> 00:03:12,140
So the scrolling has stopped and whenever we're over, we see the message there, mouse stopper.

43
00:03:12,320 --> 00:03:15,250
Whenever we leave, the scrolling commences again.

44
00:03:15,770 --> 00:03:17,690
So go ahead and add this into your application.

45
00:03:17,960 --> 00:03:23,360
The ability to stop and start the scroll and you can add in the event listeners for mouse enter and

46
00:03:23,360 --> 00:03:26,840
mouse leave to toggle that to either true or false.