How to Hide Scrollbar and Visible Only Scrolling

If you want to make custom natives scrollbar WebKit gives some CSS tags to change your scrollbar. So we make all scrollbar button, track and thumb transparent and give predefined width. If you set this width 0px then it flicks.

(div *) selector helps to apply these settings to all div elements.

div * {
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent;
}
::-webkit-scrollbar {
width: 3px !important;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
background-color: transparent;
}
}

Now you need to add some code to display scrolling bar when the user scrolls. So we add pure JS code and start to listen to scrolling.

window.addEventListener('scroll', this.handleScroll, true);

when scrolling starts to add to on-scrollbar classes to related scrolling entity

.on-scrollbar{
scrollbar-width: thin; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}

.on-scrollbar::-webkit-scrollbar-track {
-webkit-box-shadow: none !important;
background-color: transparent !important;
}

.on-scrollbar::-webkit-scrollbar {
width: 6px !important;
background-color: transparent;
}

.on-scrollbar::-webkit-scrollbar-thumb {
background-color: #acacac;
}

below codes adding these classes to scrolling entity

handleScroll = (e) => {
if (e.target.classList.contains("on-scrollbar") === false) {
e.target.classList.add("on-scrollbar");
}
}

How to make invisible again scrollbar invisible again after scrolling finished. This is your decision. You can set up a timer listen to scrolling continue when it finished you can remove all on-scrollbar classes. Or when the user moves the mouse cursor outside the entity then you can trigger remove operation.

Styling Scrollbar

https://webkit.org/blog/363/styling-scrollbars/ .
https://css-tricks.com/custom-scrollbars-in-webkit/ .
https://css-tricks.com/snippets/sass/custom-scrollbars-mixin/ . (No Firefox)
https://css-tricks.com/the-current-state-of-styling-scrollbars/
https://css-tricks.com/almanac/properties/s/scrollbar-color/

Scroll Control

https://css-tricks.com/need-to-scroll-to-the-top-of-the-page/ . (Scrolling A defined position With Smooth Animation) . (Scroll Snapping)
https://developers.google.com/web/updates/2018/07/css-scroll- snap .
https://css-tricks.com/a-couple-of-use-cases-for-calc/ . (Calculation Height)

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store