How to Hide Scrollbar and Visible Only Scrolling

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

Extra Note: LearnReactUI.dev is my new web platform; you will find free ebooks about UI, JavaScript, React, and Frontend concepts.

(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 the 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 after scrolling finished. This is your decision. You can set up a timer to 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.