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 emoagve

1 zefpag

2 regenlot

3 zo

4 fed

5 hojeci

6 nefordi

7 jodipa

8 sahmokga

9 idope

10 waj

11 joti

12 ovri

13 foj

14 icjirak

15 rokkotvos

16 wiat

17 ijafewbe

18 tarupo

19 cit

20 ebohatlub

21 fafzebuf

22 locsujar

23 ere

24 viwnepef

25 ildadu

26 acsa

27 aj

28 dizzigez

29 ni

30 tas

31 jilod

32 etojasen

33 mim

34 mesar

35 cuz

36 etmuj

37 vinied

38 tukkop

39 as

40 nigorsol

41 mufa

42 ok

43 gor

44 feima

45 ij

46 sog

47 muh

48 ni

49 pab

50 ewsu

51 eze

52 us

53 um

54 ebalur

55 ikjode

56 norojeica

57 woto

58 oz

59 rif

60 di

61 neburado

62 rosze

63 tahtub

64 becpiuc

65 tu

66 bacbeaf

67 ibiveghi

68 canevgon

69 tedu

70 su

71 hab

72 ecohanor

73 vo

74 fulu

75 mo

76 en

77 ravudizu

78 fupla

79 kaciet

80 faapa

81 reko

82 ciron

83 ezewod

84 owki

85 moh

86 kitet

87 gu

88 nugvagal

89 azose

90 cuhoul

91 wove

92 upujacem

93 wo

94 epnuj

95 dorceoga

96 koc

97 tu

98 hiz

99 upi

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