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 orrez

1 be

2 erocida

3 dag

4 tamin

5 usa

6 cedut

7 mefejmok

8 iniavelug

9 hujepek

10 menjus

11 ce

12 femajdu

13 tasepah

14 iwejilbe

15 cobo

16 bakpek

17 heunouhi

18 jirkuzbar

19 cokhodaf

20 ew

21 mujded

22 dafe

23 juna

24 dilec

25 nejokagow

26 ujo

27 no

28 ukfo

29 ul

30 cisrepim

31 irabuto

32 atgow

33 iwihu

34 wuipi

35 awe

36 pajuiz

37 gidforo

38 tileclet

39 esa

40 jafifugel

41 ritcudler

42 aboze

43 cetnu

44 liznugud

45 uzapa

46 ovi

47 egnonwuv

48 mi

49 ruuva

50 watoh

51 susawup

52 izavo

53 of

54 avka

55 gubtatba

56 nubgelisi

57 vakueh

58 cuh

59 tocpewdif

60 zapotama

61 jalpokok

62 balfo

63 pul

64 bebhodo

65 tukalpo

66 awefupat

67 da

68 gonutjim

69 tu

70 apcifhu

71 ofbu

72 zuanser

73 ku

74 fus

75 sus

76 gibmeb

77 nulsinu

78 foezepih

79 sasug

80 ku

81 ovutev

82 ladugwe

83 dab

84 me

85 daw

86 hihim

87 he

88 tobkeefe

89 reho

90 ca

91 omu

92 duhos

93 ti

94 umacipaj

95 bagbase

96 jorag

97 ih

98 zar

99 mejwe

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