Custom Scrollbar

Highlights

Use JavaScript to create a scrollbar thumb in three parts.
Manually draw the scrollbar track using the ::before pseudo-element to make the track narrower than the thumb.
Draggable thumb for scrolling.
Auto-hiding when content fits container.
Smooth scroll on track click.
Auto shrink text input.

Phasellus Basic 👉🏻 in maximus vulputate, lacus risus luctus elit, vitae faucibus nisl nulla non elit. Sed in dolor id leo. With placeholder 👉🏻 Pellentesque Prefilled 👉🏻 morbi tristique senectus et netus et malesuada fames ac turpis Disabled 👉🏻 Donec a venenatis turpis.

Try try 👉🏻 sapien, quis luctus justo pretium nec. Nullam euismod luctus lorem, eu fringilla dolor pulvinar et. Nam nec venenatis lectus, nec laoreet lorem.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec sagittis purus. Ut efficitur, felis ut semper imperdiet, turpis augue maximus sapien, ac congue orci nisi at est. Donec luctus accumsan placerat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Integer rutrum dui eros, at finibus elit aliquet sit amet. Curabitur efficitur eget mauris sed sodales. Sed mattis, est nec posuere consectetur, nisl ante accumsan purus, sed feugiat purus libero at nulla.

Phasellus malesuada, magna in maximus vulputate, lacus risus luctus elit, vitae faucibus nisl nulla non elit. Sed in dolor id leo ullamcorper suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a venenatis turpis.

Morbi feugiat laoreet sapien, quis luctus justo pretium nec. Nullam euismod luctus lorem, eu fringilla dolor pulvinar et. Nam nec venenatis lectus, nec laoreet lorem.