1
00:00:01,030 --> 00:00:01,660
‫Hey, dad.

2
00:00:01,750 --> 00:00:02,470
‫Welcome back.

3
00:00:02,830 --> 00:00:09,160
‫Now in this lecture, let us discuss about scroll bars until now, we haven't discussed this point and

4
00:00:09,160 --> 00:00:10,090
‫it's important.

5
00:00:10,300 --> 00:00:15,190
‫So before ending this course, before ending this project, it's got time for Astralis Gazette.

6
00:00:15,970 --> 00:00:22,420
‫Whenever you visit any type of page, if the content of the page is more than 100, which which has

7
00:00:22,420 --> 00:00:26,650
‫more than 100 view board, then we are going to have this scroll bar.

8
00:00:26,950 --> 00:00:29,410
‫And I think you already know about the scroll bar.

9
00:00:29,860 --> 00:00:30,940
‫Then I've done that.

10
00:00:30,940 --> 00:00:34,960
‫You have visited thousands of website and you have experience.

11
00:00:35,380 --> 00:00:37,630
‫Scrollbar can be customize it.

12
00:00:37,780 --> 00:00:40,180
‫Since we are walking with Jesus, we are controlling.

13
00:00:40,180 --> 00:00:43,840
‫Everything that we are viewing in our browser can be customized.

14
00:00:43,960 --> 00:00:46,840
‫This Galvan, because this is my web page.

15
00:00:47,320 --> 00:00:50,170
‫Yes, we can do that and we have several options.

16
00:00:50,920 --> 00:00:54,910
‫So all we have to do is just jump on to our CSF style or our.

17
00:00:55,780 --> 00:00:59,800
‫And here we can control our scrollbar or we hold it page.

18
00:01:00,340 --> 00:01:06,630
‫But before doing that, the old writing, any type of CC content I want to discuss about golden statue

19
00:01:06,640 --> 00:01:07,540
‫should be available.

20
00:01:08,110 --> 00:01:16,150
‫This whole thing that this whole thing that you see in dark gray, this is known as scrollbar.

21
00:01:17,020 --> 00:01:17,270
‫Yup.

22
00:01:17,710 --> 00:01:18,870
‫Scrollbar come.

23
00:01:18,880 --> 00:01:24,910
‫That means this is the time that we are currently moving and where we are moving, we are moving on

24
00:01:24,910 --> 00:01:25,510
‫this track.

25
00:01:25,810 --> 00:01:30,280
‫So this whole thing, like the great thing, is known as scrollbar.

26
00:01:30,580 --> 00:01:35,370
‫But OK, so we are moving this come on scrollbar to OK.

27
00:01:35,410 --> 00:01:36,610
‫I hope you got the idea.

28
00:01:37,120 --> 00:01:40,780
‫So if we need to customize, we are going to customize this stock.

29
00:01:41,530 --> 00:01:49,330
‫And this time maybe we want the stock to be a bit thinner, or maybe we want to change the color of

30
00:01:49,330 --> 00:01:49,930
‫this thumb.

31
00:01:50,200 --> 00:01:53,440
‫We can do that, but these two domes are important.

32
00:01:54,310 --> 00:01:56,590
‫Now let me get back here on my Mike's.

33
00:01:57,940 --> 00:02:03,610
‫So if I need to control the camp on my whole page, I just need to jump on to my e-mail because all

34
00:02:03,610 --> 00:02:06,120
‫my content is inside this HDMI bag.

35
00:02:06,850 --> 00:02:11,170
‫Now let me select my email and then I need to use two columns.

36
00:02:11,350 --> 00:02:14,330
‫And then I will have options regarding my scrollbar.

37
00:02:15,190 --> 00:02:20,950
‫But remember one important thing that we need to utilize this get otherwise this is not going to work.

38
00:02:21,430 --> 00:02:22,600
‫So I just crawled on.

39
00:02:22,630 --> 00:02:25,600
‫You would have a scroll my thumb scroll scrollbar track.

40
00:02:25,720 --> 00:02:26,890
‫These two are important.

41
00:02:27,250 --> 00:02:30,320
‫And then again, we have our own scroll about McCaig.

42
00:02:30,340 --> 00:02:37,240
‫Scroll by and then I can say the word of my entire scrollbar selected and I want to go with the word

43
00:02:37,240 --> 00:02:43,480
‫has 20 Pixel four now and then again, I need to select my HDR mode and head.

44
00:02:43,480 --> 00:02:45,810
‫I need to connect my opinion.

45
00:02:46,390 --> 00:02:48,970
‫And then I need to go with my scrollbar.

46
00:02:49,270 --> 00:02:51,100
‫Then I have come as a left track.

47
00:02:51,430 --> 00:02:54,370
‫So Thomas start moving will part and head.

48
00:02:54,370 --> 00:02:56,440
‫I need to just change the background color.

49
00:02:57,130 --> 00:02:58,540
‫Let's dig blue for now.

50
00:02:59,200 --> 00:03:01,720
‫This is going to look pretty bad, but let's try it.

51
00:03:02,440 --> 00:03:04,810
‫And then I'm going to go with my estimate again.

52
00:03:05,470 --> 00:03:07,600
‫Search about scroll by track.

53
00:03:08,770 --> 00:03:10,540
‫Make sure to use this Rabkin.

54
00:03:10,930 --> 00:03:14,200
‫And then here I'm going to simply change my background again.

55
00:03:15,520 --> 00:03:18,510
‫Let's try this dock one and I saved this one.

56
00:03:18,880 --> 00:03:19,750
‫Then back here.

57
00:03:20,820 --> 00:03:25,950
‫You can see our whole scrollbar exchange and we can customize a lot of things.

58
00:03:26,190 --> 00:03:31,680
‫So if we have our company, we can also add border areas are and pixels.

59
00:03:32,680 --> 00:03:33,810
‫You saved this one.

60
00:03:34,500 --> 00:03:36,810
‫You can see now it's looking something like this.

61
00:03:37,410 --> 00:03:38,740
‫Let's try to do something more.

62
00:03:38,760 --> 00:03:42,540
‫Let's try to add border here to border.

63
00:03:42,690 --> 00:03:46,650
‫One Big Sur solid and maybe get some color.

64
00:03:47,860 --> 00:03:51,120
‫OK, this this white something.

65
00:03:51,120 --> 00:03:51,860
‫Save this one.

66
00:03:51,900 --> 00:03:52,500
‫Get back here.

67
00:03:52,500 --> 00:03:54,510
‫You can see this white border.

68
00:03:54,990 --> 00:03:59,840
‫So that's how you are going to control your own scrollbar for the entire operation.

69
00:04:00,420 --> 00:04:04,440
‫But the hosts are Dana, their twist and concept that I want to discuss.

70
00:04:05,130 --> 00:04:08,490
‫But the first thing is, and I hope you got understanding of this whole part.

71
00:04:08,700 --> 00:04:11,400
‫OK, then we are going to move on to the next one.

72
00:04:11,760 --> 00:04:15,480
‫First, let me comment both of these lines because I don't like this.

73
00:04:15,840 --> 00:04:17,940
‫And also, let me try something light.

74
00:04:19,000 --> 00:04:20,430
‫So this looks much better.

75
00:04:20,630 --> 00:04:20,910
‫Okay.

76
00:04:21,180 --> 00:04:21,490
‫Great.

77
00:04:21,510 --> 00:04:22,100
‫Great.

78
00:04:22,860 --> 00:04:30,560
‫Now let me talk about the next concept, which is scrollbar inside our current the current section on

79
00:04:30,570 --> 00:04:33,420
‫anything else that we are doing with our web page.

80
00:04:33,630 --> 00:04:35,160
‫So this is mean scrollbar.

81
00:04:35,160 --> 00:04:36,570
‫We understand about this now.

82
00:04:36,870 --> 00:04:43,520
‫This is this called border, which is attached to our HDMI page HDMI cord HDMI itself.

83
00:04:43,680 --> 00:04:44,430
‫Remember this?

84
00:04:44,790 --> 00:04:51,930
‫So this is the main scrollbar, but there are several other scrollbar if you visit Facebook here, I

85
00:04:51,930 --> 00:04:55,590
‫have created this demo page and this is not real page, actually.

86
00:04:56,130 --> 00:05:00,270
‫So if it was this page, you will see like I have, I scroll by here.

87
00:05:00,690 --> 00:05:04,440
‫This is my main website, which is callable with this scrollbar.

88
00:05:05,130 --> 00:05:09,960
‫So this is my main website, and then I have a scroll right ahead.

89
00:05:10,380 --> 00:05:12,690
‫So how to implement something like this?

90
00:05:13,750 --> 00:05:20,110
‫You see, this is one means, Galvan, that currently we are using with our website, but then we have

91
00:05:20,110 --> 00:05:21,610
‫a scroll bar for this day.

92
00:05:22,150 --> 00:05:25,420
‫Then we have us called Ma4 Detective how to do this?

93
00:05:25,930 --> 00:05:33,770
‫Well, we can target any specific there mean anything, for example, here and our web page itself.

94
00:05:34,240 --> 00:05:41,750
‫Maybe I want to keep this in a scrollable section, or maybe let's leave it not a mean section itself.

95
00:05:41,770 --> 00:05:45,940
‫So this whole main section, if you observe this is on main section.

96
00:05:46,960 --> 00:05:48,040
‫Let's play with this.

97
00:05:48,670 --> 00:05:52,090
‫So what I'm going to do is I'll let me add some temporary code.

98
00:05:52,540 --> 00:05:55,690
‫Later on, I'm going to just combine this one.

99
00:05:56,200 --> 00:06:00,970
‫And remember, we are going to play with two main elements and three properties.

100
00:06:01,450 --> 00:06:02,260
‫So what are these?

101
00:06:02,260 --> 00:06:06,790
‫Three properties are scrollbar, which is going to define the word district.

102
00:06:07,630 --> 00:06:10,960
‫Then we have this track and then we have this come.

103
00:06:12,340 --> 00:06:13,950
‫OK, so what I'm going to do.

104
00:06:14,000 --> 00:06:15,170
‫Let me copy this one.

105
00:06:15,920 --> 00:06:20,780
‫I'll get back here an additive instead of a and I'm going to go with my main.

106
00:06:24,450 --> 00:06:25,500
‫If I save this one.

107
00:06:26,190 --> 00:06:26,970
‫Get back here.

108
00:06:28,120 --> 00:06:30,280
‫You will see nothing happens.

109
00:06:30,910 --> 00:06:31,420
‫Why?

110
00:06:32,080 --> 00:06:39,100
‫Well, had this point of time, we haven't provided a fixed height to, I mean, that means if I provide

111
00:06:39,100 --> 00:06:45,760
‫a fixed height to my men, let's say me and let's say height as 200 pixels only.

112
00:06:46,330 --> 00:06:53,230
‫That means all the content will be inside this 200 pixel and everything extra will be scrollable.

113
00:06:53,740 --> 00:06:54,790
‫And the other property.

114
00:06:54,790 --> 00:06:56,450
‫I need to address overflow.

115
00:06:56,450 --> 00:07:04,270
‫Why that means overflow, why and which will describe my image and height should be restricted towards

116
00:07:04,270 --> 00:07:05,500
‫200 pixels only.

117
00:07:05,740 --> 00:07:11,630
‫And if there is any extra content, overflow it with the head of scholars.

118
00:07:12,100 --> 00:07:15,410
‫Now we are overflowing only access.

119
00:07:16,240 --> 00:07:17,120
‫Save this one.

120
00:07:17,200 --> 00:07:18,730
‫Get back here now.

121
00:07:18,730 --> 00:07:24,880
‫If you can see this is this crawl, here is this scroll for I Section 50 The Edge.

122
00:07:25,570 --> 00:07:26,350
‫Save the Swan.

123
00:07:26,350 --> 00:07:27,040
‫Get back here.

124
00:07:27,490 --> 00:07:30,790
‫Now you can see this page and you can see this scroll.

125
00:07:31,390 --> 00:07:32,920
‫So this is on header here.

126
00:07:32,920 --> 00:07:41,590
‫From here are the main section start, which is the edge, and since the main is scrollable, all the

127
00:07:41,590 --> 00:07:43,240
‫content will be inside here.

128
00:07:45,270 --> 00:07:49,690
‫And if I go outside the main, I will have my own party squad.

129
00:07:50,550 --> 00:07:53,220
‫Now here, I'm just trying to explain a concept.

130
00:07:53,760 --> 00:07:56,250
‫We are not going to implement this NREL project.

131
00:07:56,460 --> 00:07:59,970
‫This lecture is just to explain this cruel concept.

132
00:08:00,810 --> 00:08:03,300
‫Now, remember, we can control a lot of things here.

133
00:08:03,720 --> 00:08:07,830
‫So instead of destroying direct, we can go with five big.

134
00:08:08,700 --> 00:08:13,120
‫And if I get back here, you can see this content is a bit smaller now.

135
00:08:13,680 --> 00:08:16,240
‫And also, I can change this to something like.

136
00:08:16,890 --> 00:08:20,610
‫And this whole track to be dark, save this one.

137
00:08:21,210 --> 00:08:23,850
‫Now you can see this whole scrollbar on the side.

138
00:08:24,450 --> 00:08:26,250
‫So a lot of things can be controlled.

139
00:08:26,400 --> 00:08:29,430
‫But my main aim was to make you understand about this call.

140
00:08:30,300 --> 00:08:34,470
‫Now you can hide this crawl by itself, just provide over Typekit or pixel.

141
00:08:34,770 --> 00:08:37,590
‫And basically, you will have no visible scroll.

142
00:08:39,000 --> 00:08:45,420
‫For now, I'm going to commend the entire record for this one so you can access them.

143
00:08:45,510 --> 00:08:47,010
‫You are great.

144
00:08:47,310 --> 00:08:54,750
‫If I try to hide this one, which is my main scrollbar, say this with genomics, then you can see now

145
00:08:54,750 --> 00:08:58,240
‫the scroll bar is not visible, so you can play with this.

146
00:08:58,260 --> 00:08:59,640
‫I hope you got the idea.

147
00:08:59,880 --> 00:09:03,780
‫The best example here I really wanted to share was about Facebook.

148
00:09:03,840 --> 00:09:09,660
‫You can see the scroll bar, then this scroll button for a particular section and then this whole scrollbar.

149
00:09:10,770 --> 00:09:16,290
‫So that's it, that's all about this whole section, and I'm going to revert back these changes, don't

150
00:09:16,290 --> 00:09:16,590
‫worry.

151
00:09:17,070 --> 00:09:19,950
‫Thank you for following and I see you guys in the next one.