‫Hey, dad.
‫Welcome back.
‫Now in this lecture, let us discuss about scroll bars until now, we haven't discussed this point and
‫it's important.
‫So before ending this course, before ending this project, it's got time for Astralis Gazette.
‫Whenever you visit any type of page, if the content of the page is more than 100, which which has
‫more than 100 view board, then we are going to have this scroll bar.
‫And I think you already know about the scroll bar.
‫Then I've done that.
‫You have visited thousands of website and you have experience.
‫Scrollbar can be customize it.
‫Since we are walking with Jesus, we are controlling.
‫Everything that we are viewing in our browser can be customized.
‫This Galvan, because this is my web page.
‫Yes, we can do that and we have several options.
‫So all we have to do is just jump on to our CSF style or our.
‫And here we can control our scrollbar or we hold it page.
‫But before doing that, the old writing, any type of CC content I want to discuss about golden statue
‫should be available.
‫This whole thing that this whole thing that you see in dark gray, this is known as scrollbar.
‫Yup.
‫Scrollbar come.
‫That means this is the time that we are currently moving and where we are moving, we are moving on
‫this track.
‫So this whole thing, like the great thing, is known as scrollbar.
‫But OK, so we are moving this come on scrollbar to OK.
‫I hope you got the idea.
‫So if we need to customize, we are going to customize this stock.
‫And this time maybe we want the stock to be a bit thinner, or maybe we want to change the color of
‫this thumb.
‫We can do that, but these two domes are important.
‫Now let me get back here on my Mike's.
‫So if I need to control the camp on my whole page, I just need to jump on to my e-mail because all
‫my content is inside this HDMI bag.
‫Now let me select my email and then I need to use two columns.
‫And then I will have options regarding my scrollbar.
‫But remember one important thing that we need to utilize this get otherwise this is not going to work.
‫So I just crawled on.
‫You would have a scroll my thumb scroll scrollbar track.
‫These two are important.
‫And then again, we have our own scroll about McCaig.
‫Scroll by and then I can say the word of my entire scrollbar selected and I want to go with the word
‫has 20 Pixel four now and then again, I need to select my HDR mode and head.
‫I need to connect my opinion.
‫And then I need to go with my scrollbar.
‫Then I have come as a left track.
‫So Thomas start moving will part and head.
‫I need to just change the background color.
‫Let's dig blue for now.
‫This is going to look pretty bad, but let's try it.
‫And then I'm going to go with my estimate again.
‫Search about scroll by track.
‫Make sure to use this Rabkin.
‫And then here I'm going to simply change my background again.
‫Let's try this dock one and I saved this one.
‫Then back here.
‫You can see our whole scrollbar exchange and we can customize a lot of things.
‫So if we have our company, we can also add border areas are and pixels.
‫You saved this one.
‫You can see now it's looking something like this.
‫Let's try to do something more.
‫Let's try to add border here to border.
‫One Big Sur solid and maybe get some color.
‫OK, this this white something.
‫Save this one.
‫Get back here.
‫You can see this white border.
‫So that's how you are going to control your own scrollbar for the entire operation.
‫But the hosts are Dana, their twist and concept that I want to discuss.
‫But the first thing is, and I hope you got understanding of this whole part.
‫OK, then we are going to move on to the next one.
‫First, let me comment both of these lines because I don't like this.
‫And also, let me try something light.
‫So this looks much better.
‫Okay.
‫Great.
‫Now let me talk about the next concept, which is scrollbar inside our current the current section on
‫anything else that we are doing with our web page.
‫So this is mean scrollbar.
‫We understand about this now.
‫This is this called border, which is attached to our HDMI page HDMI cord HDMI itself.
‫Remember this?
‫So this is the main scrollbar, but there are several other scrollbar if you visit Facebook here, I
‫have created this demo page and this is not real page, actually.
‫So if it was this page, you will see like I have, I scroll by here.
‫This is my main website, which is callable with this scrollbar.
‫So this is my main website, and then I have a scroll right ahead.
‫So how to implement something like this?
‫You see, this is one means, Galvan, that currently we are using with our website, but then we have
‫a scroll bar for this day.
‫Then we have us called Ma4 Detective how to do this?
‫Well, we can target any specific there mean anything, for example, here and our web page itself.
‫Maybe I want to keep this in a scrollable section, or maybe let's leave it not a mean section itself.
‫So this whole main section, if you observe this is on main section.
‫Let's play with this.
‫So what I'm going to do is I'll let me add some temporary code.
‫Later on, I'm going to just combine this one.
‫And remember, we are going to play with two main elements and three properties.
‫So what are these?
‫Three properties are scrollbar, which is going to define the word district.
‫Then we have this track and then we have this come.
‫OK, so what I'm going to do.
‫Let me copy this one.
‫I'll get back here an additive instead of a and I'm going to go with my main.
‫If I save this one.
‫Get back here.
‫You will see nothing happens.
‫Why?
‫Well, had this point of time, we haven't provided a fixed height to, I mean, that means if I provide
‫a fixed height to my men, let's say me and let's say height as 200 pixels only.
‫That means all the content will be inside this 200 pixel and everything extra will be scrollable.
‫And the other property.
‫I need to address overflow.
‫Why that means overflow, why and which will describe my image and height should be restricted towards
‫200 pixels only.
‫And if there is any extra content, overflow it with the head of scholars.
‫Now we are overflowing only access.
‫Save this one.
‫Get back here now.
‫If you can see this is this crawl, here is this scroll for I Section 50 The Edge.
‫Save the Swan.
‫Get back here.
‫Now you can see this page and you can see this scroll.
‫So this is on header here.
‫From here are the main section start, which is the edge, and since the main is scrollable, all the
‫content will be inside here.
‫And if I go outside the main, I will have my own party squad.
‫Now here, I'm just trying to explain a concept.
‫We are not going to implement this NREL project.
‫This lecture is just to explain this cruel concept.
‫Now, remember, we can control a lot of things here.
‫So instead of destroying direct, we can go with five big.
‫And if I get back here, you can see this content is a bit smaller now.
‫And also, I can change this to something like.
‫And this whole track to be dark, save this one.
‫Now you can see this whole scrollbar on the side.
‫So a lot of things can be controlled.
‫But my main aim was to make you understand about this call.
‫Now you can hide this crawl by itself, just provide over Typekit or pixel.
‫And basically, you will have no visible scroll.
‫For now, I'm going to commend the entire record for this one so you can access them.
‫You are great.
‫If I try to hide this one, which is my main scrollbar, say this with genomics, then you can see now
‫the scroll bar is not visible, so you can play with this.
‫I hope you got the idea.
‫The best example here I really wanted to share was about Facebook.
‫You can see the scroll bar, then this scroll button for a particular section and then this whole scrollbar.
‫So that's it, that's all about this whole section, and I'm going to revert back these changes, don't
‫worry.
‫Thank you for following and I see you guys in the next one.