Up next in 10
Angular ngx-scrollbar Example to Build Custom Scrollbar in HTML Elements & Windows Using TS
Jun 13, 2025
Get the full source code of the application here:
Official Website:
https://freemediatools.com
Show More Show Less View Video Transcript
0:01
uh hello guys uh welcome to this video
0:03
So in this video I'll show you angular
0:06
package for building a custom scroll bar
0:08
inside your website So this is actually
0:11
the component here ngx scroll bar So you
0:14
can in this is actually you can control
0:17
the look and feel of your scroll bar You
0:19
can also have this You can see it is
0:21
appearing in blue color You can control
0:24
the look and feel of this You can
0:25
control the width You can also change
0:27
this color as well As you can see it is
0:30
appearing in blue color You can change
0:31
it to any color We have also these
0:34
buttons automatically as you press the
0:36
button it will scroll up scroll down So
0:39
in this easy way you can control the
0:41
functionality of this custom scroll bar
0:43
inside your angular application And uh
0:46
you can automatically scroll to the top
0:49
scroll to the any location by pressing
0:51
these buttons as well And also you can
0:53
control the look and feel of the scroll
0:55
bar as well So the module is if you go
0:58
to npmjs.com just search for this module
1:01
here ngx scroll bar and this is actually
1:05
the package here and the command is
1:08
simple you need to install this and it's
1:11
almost having 86,000 weekly downloads so
1:14
it's a very popular package and now to
1:17
implement this it's very easy you first
1:19
of all need to go to this app
1:22
domodule.ts ts file of your angular
1:25
project
1:27
and here you first need to just add this
1:30
uh import line
1:34
So just import this scroll bar
1:38
module and it will be coming from this
1:40
ngx scroll bar and then you just need to
1:44
go to the imports array and just add
1:46
this scroll bar module that you imported
1:49
So in this easy way you can do this
1:55
So after you do this just go to your
1:57
app.component html file So wherever you
2:01
need to embed this custom scroll bar you
2:04
will simply
2:07
have this ngcroll bar directive Here you
2:10
will see ng scroll bar This is the
2:13
opening tag and this is the closing tag
2:15
So this is the way by which you can
2:18
declare a custom scroll bar and uh right
2:21
here we have given this you can even
2:23
give a custom class to it as well We can
2:26
control the CSS properties such as the
2:28
color of the scroll bar the width and
2:30
the height as well And then we also can
2:34
give buttons as well So these two
2:36
buttons that we have given you will see
2:40
like this And then we have a series of
2:43
buttons here will scroll to bottom and
2:46
here we are passing 500 So now what
2:48
happens as I click this button it will
2:50
navigate to the bottom of the scroll bar
2:53
and if I change it to 200 you will now
2:56
see again it will so this is actually
3:00
the time
3:02
in milliseconds how much time it takes
3:04
to go to the bottom of this So if you
3:08
pass here 1,000 millisecond so now it
3:10
will take exactly 1 second for the
3:13
animation to take place So here if I
3:15
replace here 5,000 so now it takes 5,000
3:19
milliseconds to navigate to the bottom
3:21
of the position So in this easy way you
3:24
can control it
3:26
and then
3:29
you you can see we have given this
3:31
background here
3:33
You can even control the color as well
3:36
So instantly you can scroll to the
3:39
bottom here So this is the scroll to
3:41
bottom here button scroll to up
3:46
So it has contained these methods here
3:48
Scroll to top scroll to bottom So we
3:50
have defined all these methods inside
3:52
your typescript here You will see this
3:53
is
3:56
the example here And once you import
4:00
that module in the app domodule.ts TS
4:02
file then you can easily
4:07
use this So this is the directive name
4:10
here You will see this is ng scroll bar
4:13
So you simply do this and then you can
4:17
attach some custom CSS properties as
4:19
well So you define your template here
4:21
right here by ng- template tag So this
4:24
is really easy
4:27
So in this easy way you can implement a
4:30
custom scroll bar inside your angular
4:32
application using this module You can
4:35
even see we also have wiped So here you
4:38
can change control the color as well
4:41
They do offer a nice little
4:42
documentation as well if you visit their
4:47
scroll component
4:49
So
4:51
in this easy way you can use this
4:55
So thank you very much for watching this
4:58
video and also check out my website
5:01
freemediattools.com
5:03
uh which contains uh
5:06
thousands of tools related to audio
5:08
video and image and I will be seeing you
5:11
in the next
5:14
live stream
#Programming