1
00:00:02,260 --> 00:00:08,560
Speaking of scrolling, we can not just find out by how far the user scrolled on the entire page or inside

2
00:00:08,560 --> 00:00:17,740
of a box but we can also actively scroll the user somewhere and a good example would be when I add buy

3
00:00:17,740 --> 00:00:21,550
groceries to finish projects. It gets added there

4
00:00:21,610 --> 00:00:25,730
but of course it gets added at the bottom and therefore I can only see a part of it.

5
00:00:25,750 --> 00:00:33,340
Now maybe we want to scroll in this box where we add an element to, to make that element visible and

6
00:00:33,340 --> 00:00:34,000
we can do that,

7
00:00:34,000 --> 00:00:37,950
you can actively control scrolling through Javascript.

8
00:00:38,040 --> 00:00:41,200
Now let me show you how it works here in the developer tools.

9
00:00:41,200 --> 00:00:45,940
Let's select this section here and in there, to be precise,

10
00:00:45,940 --> 00:00:47,560
let's select the unordered list.

11
00:00:47,560 --> 00:00:53,080
If we now expand the styles, you see that there I kept the height and I make sure that we can scroll

12
00:00:53,200 --> 00:00:58,750
to see the content which doesn't fit in the unordered list, so that unordered list is scrollable.

13
00:00:58,810 --> 00:01:04,330
Now with it selected, let's go to the console and use $0 again to interact with that unordered

14
00:01:04,330 --> 00:01:05,130
list

15
00:01:05,180 --> 00:01:12,010
and now there, you got a couple of methods you can call, for example scrollTo. scrollTo takes two coordinates - 

16
00:01:12,100 --> 00:01:17,890
x and y, where you can define how much you want to scroll to the left or right and how much you want

17
00:01:17,890 --> 00:01:19,510
to scroll to the top or bottom.

18
00:01:19,510 --> 00:01:22,780
Now here we can't scroll left to right so there's nothing we can set there,

19
00:01:22,800 --> 00:01:28,210
if you set this to 100 on x for example, it wouldn't have any effect but we can scroll on the

20
00:01:28,210 --> 00:01:29,670
y-axis.

21
00:01:29,710 --> 00:01:34,060
Now if I set zero here, then I tell Javascript that I don't want to scroll at all,

22
00:01:34,060 --> 00:01:40,360
not that helpful. If I set it to 50 however, then this might be better because now I tell Javascript

23
00:01:40,360 --> 00:01:47,370
that I want to scroll down to 50 pixels. If I hit enter now, you see indeed this changed right, it scrolled

24
00:01:47,380 --> 00:01:47,890
there.

25
00:01:47,890 --> 00:01:49,020
Let me show this again,

26
00:01:49,150 --> 00:01:51,490
let's repeat that same command, boom,

27
00:01:51,590 --> 00:01:54,480
it scrolled. If you set it to a very high value,

28
00:01:54,490 --> 00:01:57,920
well then it just goes as far down as possible.

29
00:01:57,990 --> 00:02:00,530
Now you can also not just scroll to absolute values,

30
00:02:00,540 --> 00:02:01,570
you can also 

31
00:02:01,590 --> 00:02:08,190
scroll relatively with scrollBy. With scrollBy I tell Javascript by how many pixels I want to scroll

32
00:02:08,190 --> 00:02:08,980
down.

33
00:02:09,030 --> 00:02:10,370
So if I enter 50 here,

34
00:02:10,380 --> 00:02:12,500
I'll have the same effect as before actually

35
00:02:12,840 --> 00:02:13,870
but you'll see a difference

36
00:02:13,870 --> 00:02:20,010
now if I am at 50 and I repeat this command, now I scroll down 50 pixels more.

37
00:02:20,430 --> 00:02:29,750
If we would do the same with scrollTo, scroll to 50 here, you will see I scroll to 50 pixels and if

38
00:02:29,750 --> 00:02:33,590
I repeat that and I am at that position, nothing changes.

39
00:02:33,620 --> 00:02:39,890
So you can control whether you want to scroll to a specific position or by some amount of pixels and

40
00:02:39,890 --> 00:02:46,040
combined with the fact that you can get the coordinates of any element on the screen, you could of course

41
00:02:46,040 --> 00:02:51,530
then also use this to tell Javascript to scroll to a specific element by getting the coordinates of

42
00:02:51,530 --> 00:02:58,870
that element and then scrolling to it. If you want to make a specific element visible with scrolling

43
00:02:58,870 --> 00:03:01,130
though, there is an even easier way.

44
00:03:01,330 --> 00:03:07,330
You can also go to that element, for example the project item which we added here with the help of this

45
00:03:07,330 --> 00:03:14,560
add project method in the project list class and make sure that this element, when we move it, gets scrolled

46
00:03:14,560 --> 00:03:20,320
into view and to make sure that this happens, we can go to this place where I move the element here and

47
00:03:20,320 --> 00:03:27,600
then on that element which you want to bring into view, there you can call scroll into view as a method

48
00:03:27,760 --> 00:03:29,550
and this will do just what the names suggests.

49
00:03:30,220 --> 00:03:36,640
So if you now save that then reload, you will see that if I add buy groceries to this finished projects

50
00:03:36,640 --> 00:03:43,430
box, it gets scrolled into view automatically and of course the same if I add something to active projects.

51
00:03:43,730 --> 00:03:48,490
So this can be useful to make sure that it scrolls into view.

52
00:03:48,830 --> 00:03:54,080
Now of course what you might notice is that scrolling here always means jumping, it immediately is

53
00:03:54,090 --> 00:03:56,990
there, we have no animation. Well you can

54
00:03:56,990 --> 00:04:03,890
in some browsers at least, Chrome and Firefox support it, you can set up how scrolling should be performed.

55
00:04:04,580 --> 00:04:05,960
By passing in an object

56
00:04:05,960 --> 00:04:15,000
here to scroll into view where you can set the behavior to smooth, the default is auto which just jumps

57
00:04:15,000 --> 00:04:18,500
there but with smooth, you'll get a tiny animation.

58
00:04:18,600 --> 00:04:23,700
So if you set this to smooth here for example and you reload and then you add groceries here to finish

59
00:04:23,700 --> 00:04:30,060
projects, watch the bottom box, you'll see it scrolled there with a nice animation and that might be nicer

60
00:04:30,060 --> 00:04:31,510
than just jumping there.

61
00:04:31,530 --> 00:04:36,870
Again, it's not supported in all browsers, specifically Internet Explorer and Safari

62
00:04:36,870 --> 00:04:41,850
don't support this feature but you can still add it to your code and on these browsers, it will just

63
00:04:41,850 --> 00:04:48,010
not have any effect, on the browsers that do support it though, you get this enhanced behavior.

64
00:04:48,090 --> 00:04:50,330
You also have this configuration available by the way

65
00:04:50,490 --> 00:04:57,750
if we select the unordered list again on scrollTo and scrollBy, there you can pass in the coordinate

66
00:04:57,780 --> 00:05:03,330
pair or alternatively pass in an object where you set top and left, top

67
00:05:03,330 --> 00:05:07,700
by how much you want to scroll from the top and left how much you want to scroll from the left, so I'll

68
00:05:07,710 --> 00:05:13,140
ignore left here because I don't want a scroll from the left but I'll set top to 50 and then here you

69
00:05:13,140 --> 00:05:15,700
can also add the behavior and set this to smooth

70
00:05:15,700 --> 00:05:17,670
and now here you'll also get that animation,

71
00:05:17,670 --> 00:05:22,110
same is available for scrollBy as I mentioned, like this.

72
00:05:22,230 --> 00:05:28,920
So this is how you can scroll and how you can control scrolling from inside Javascript, a feature which

73
00:05:28,920 --> 00:05:34,430
of course also can be helpful to make sure users see the content you want them to see.