Angular Custom Scrollbar

Lab

Pointer Events Method:

Component size

Content length

Content width

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet mollitia vero quam, nisi possimus dolorem asperiores, molestiae sit voluptatibus alias consequuntur laudantium repellat ea quidem quaerat rerum perspiciatis iste adipisci. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet mollitia vero quam, nisi possimus dolorem asperiores.

Disabled

Sensor Disabled

RTL

Highlight

Reached events

Top

Bottom

Start

End

Scrolling

Smooth scroll options

Function

Duration

Axis-Y

bottom

Axis-X

end

Result

scrollTo({bottom: 0, end: 0, duration: 800})

Styling

CSS variables options

Track

All

Positioning

Viewport

Visibility

Native

Appearance

Compact

Examples

TODO

Clean the house
Take out the thrash
Do the dishes
Feed the dog
Mow the law
Clean the house
Take out the thrash
Do the dishes
Feed the dog
Mow the law
Clean the house
Take out the thrash
Do the dishes
Feed the dog
Mow the law
Clean the house
Have a beer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Posted 9 hours ago by noeldelgado

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis facere debitis ullam, quae quidem, impedit culpa nam repellat in voluptatibus esse ab harum, hic? Aliquam nesciunt voluptates repellendus assumenda labore.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro quos voluptate doloribus. Optio unde inventore, tempore nemo repellat expedita! Quod, accusamus nobis iure. Aliquam quibusdam, nemo explicabo ipsum provident asperiores.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, qui, rem! Debitis cum maiores iste, possimus! Obcaecati accusamus eaque expedita quo soluta quis, repudiandae similique, veritatis repellendus facere suscipit! Et!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum doloremque repellat praesentium quae et consectetur iure quos porro, provident voluptates reprehenderit a. Accusamus ut, quaerat asperiores blanditiis voluptate, sint facilis.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus beatae inventore nobis esse temporibus exercitationem eos illo minima non magnam, provident sit doloribus maiores odio in animi quidem unde. Perferendis.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda earum facilis sed nihil numquam at accusamus eum error eaque alias hic sint rem consequatur impedit tempore, dolor, quos, quae esse?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore maiores maxime corrupti quisquam. Dignissimos sunt error voluptatibus repellat consequatur illo, aliquid nihil maxime veniam repudiandae, provident et sit, reiciendis dicta.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae id amet deserunt voluptate maiores sunt aut eligendi totam nesciunt magnam illo consectetur aspernatur at voluptatem, qui unde ullam omnis voluptates.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id assumenda et fugiat placeat enim quas, voluptas odio aperiam in quibusdam beatae eaque minima. Consequuntur pariatur, doloremque, odit dolorem ullam sunt!

            
            <!DOCTYPE html>
              <html lang="en">
              
              <-- BEGIN head -->
              <head>
                 <meta charset="utf-8" />
                 <title>ngx-scrollbar – Fully skinnable scrollbars with native scrolling.</title>
              </head>
              
              <-- BEGIN body -->
              <body>

Smooth scroll example

Scroll To Element Example

item 0
item 1
item 2
item 3
item 4
item 5
item 6
item 7
item 8
item 9
item 10
item 11
item 12
item 13
item 14
item 15
item 16
item 17
item 18
item 19

Integrating with other libraries

Ngx-infinite-scroll Example

0 be

1 reruwfig

2 rahefji

3 wilat

4 venovo

5 sukrifgu

6 pinvev

7 difah

8 nu

9 nom

10 mowa

11 ki

12 zole

13 ugu

14 ki

15 vibano

16 ufi

17 oroofdok

18 te

19 doc

20 orako

21 naudi

22 viro

23 podurho

24 tim

25 fuwigu

26 nazbezcas

27 wobrena

28 min

29 ahsinoj

30 nidovire

31 movdofol

32 nereah

33 fidga

34 fa

35 firzaasa

36 kipihlok

37 korpa

38 re

39 ca

40 fobdilol

41 zaforgu

42 biwbaj

43 joperemi

44 koswatduh

45 jemsicoc

46 nulumaaz

47 uc

48 ogoko

49 virew

50 povuw

51 ibzi

52 lasvizbi

53 vogewse

54 lirkag

55 ma

56 kis

57 ej

58 nafomik

59 rijat

60 co

61 muk

62 umo

63 tahot

64 wodlowzu

65 zi

66 itkifli

67 zom

68 voluzid

69 dolbu

70 takbad

71 pokuafo

72 jicaw

73 an

74 wefmusvi

75 gatu

76 hida

77 hasimne

78 kulgoewe

79 lurdowuvu

80 awdu

81 di

82 biwtat

83 faebepu

84 matsipo

85 rikimog

86 hiijcag

87 gog

88 juhojja

89 viijrus

90 loejiam

91 if

92 serhemjej

93 edna

94 sios

95 tuaridi

96 keba

97 na

98 bu

99 von

CDK Virtual Scroll Example

Nested CDK Virtual Scroll Example

Row 1

[ 1 , 1 ]

[ 1 , 2 ]

[ 1 , 3 ]

[ 1 , 4 ]

[ 1 , 5 ]

[ 1 , 6 ]

[ 1 , 7 ]

Row 2

[ 2 , 1 ]

[ 2 , 2 ]

[ 2 , 3 ]

[ 2 , 4 ]

[ 2 , 5 ]

[ 2 , 6 ]

[ 2 , 7 ]

Row 3

[ 3 , 1 ]

[ 3 , 2 ]

[ 3 , 3 ]

[ 3 , 4 ]

[ 3 , 5 ]

[ 3 , 6 ]

[ 3 , 7 ]

Row 4

[ 4 , 1 ]

[ 4 , 2 ]

[ 4 , 3 ]

[ 4 , 4 ]

[ 4 , 5 ]

[ 4 , 6 ]

[ 4 , 7 ]

ngx-scrollbar

Custom overlay-scrollbars with native scrolling mechanism