We all know the scroll bar is a UI component which commonly located on the far right or bottom of a window that allows you to move the window viewing area up, down, left, or right. Most people today are familiar with scroll bars because of the need to scroll up and down on almost every web page and application. Show
Problems with the scrollbar in web-application
In this story, I will walk you through the steps on how to create the custom scrollbar in React, we can use the same technique in other Front-end Frameworks like Angular but before taking a deep dive, let's visualize the different components of a scroll-bar Scroll-bar Componentshkurra/react-on-hover-scrollbarThis is a basic but usable Example of How to create a Custom Scrollbar in react which will be visible on mouse hovering…github.com Complete Code-Sand-box project Link Steps we need to perform
All these steps have explained below in great depth Hide Native Scroll-barFirst things we need to do is to Hide the native scroll-bar of the browser on the scroll-host element, don't disable the scrolling through overflow: hidden
Below is the CSS to hide the scroll-bar on different browsers. Here is the link of code sandbox project where I have used the below CSS to hide scroll-bar on my scroll-host container CSS to hide native scroll-bar of browsersSo, we get-rid off the Browser Native scroll-bar through the above steps. Before moving to the next steps, I have created a Code Sandbox Project, which has a complete implementation. Users with an intermediate or higher level of experience can directly move there to understand the logic directly from the code. Although, I would recommend reading through the article to understand everything in detail. Let's create our custom scrollbarNext step is to render a Scroll-bar and Scroll-box thumb over our scroll-host which will help us to scroll the content through mouse drag. First, we will add a scroll-bar that will appear on hovering. Below is the code snippet along with its CSS. So, now we have separate reusable component name CustomScrollDiv, which is rendering your content in it along with scroll-bar, and this scroll-bar will be visible only when the user is hovering your CustomScrollDiv component. Render
StateFor now, we are keeping only a single state i.e. hovering, we are changing its value under mouseout and mouseover event handler registered on Scroll-host-container. As we move forward, we will add more states Now with above component and CSS in place, you will notice that scroll-bar is visible on hovering and your content is still scrollable Custom Scroll-bar visible on mouse hover scroll-host
To hide the scroll-bar we did not use the overflow: hidden, which does two things to scrolling
With this, you have also got the answer to the above question. Our next step is to render the Scroll-thumb (box) or scroll-holder, through which a user can not only scroll the content through mouse dragging but it helps the user to identify the length of scrollable content with its positioning relative to scroll-bar. This is the most critical/complex part of this implementation. So, be attentive else first have a cup of coffee/tea 🍮 😉. Scroll-thumb RenderingFirst, we will add a new div element inside scroll-bar representing scroll-thumb Scroll-thumb height calculation
Scroll Thumb height calculation
Scroll-thumb positioning
Scroll-thumb moving on mouse scroll
Scroll-Thumb dragging
First mouseDown Handler on scroll-thumbMouse down on Scroll-thumb implies, a user going to start dragging through Scroll-Thumb, so, we are keeping the current Y coordinate location of Scroll-Thumb, and changing isDragging state to true Document mouseleave and mouseup eventmouseLeave and mouseUp event on document signify user going to stop the dragging if it is currently dragging the mouse-thumb, so we are changing isDragging state to false Document mouseMove HandlingTo give scrolling effect on dragging, we need to change the scroll-top of the below components:
we are calculating this change in scrollTop at line 10 and applying this at line 20 Now, we have achieved our goal and our Custom scroll-bar on hovering is ready which is also working on mouse dragging on Scroll-Thumb, this is how it will work now. ConclusionI have tried my best to keep this story easy to understand though, it requires prerequisite like React, React-Hooks, DOM layout, etc. Some sections might require extra elaboration but to keep the story concise and understandable for all kind of users I have mentioned only important points. Feel free to ask your doubts and suggestions in the comments section below. You are free to use the CustomScrollDiv Component in your code but for production, you might need to handle extra stuff like, currently, I am calculating scroll-thumb height only after component mount, but it can change if a user resizes windows or if your scroll-host load data lazily and change scrollHeight lazily. How do I show the scrollbar on hover only?Steps we need to perform. Hide Browser's Native Scroll-bar.. Add Custom Scroll-Bar UI, this will be visible on mouse hover.. Add Custom scroll-thumb in scroll-bar.. Calculate scroll-thumb Height based on scrollable content.. Change scroll-thumb position on mouse scroll in scroll-host.. Change scroll-thumb position on mouse drag.. Can you style scrollbar CSS?In September 2018, W3C CSS Scrollbars defined specifications for customizing the appearance of scrollbars with CSS. As of 2020, 96% of internet users are running browsers that support CSS scrollbar styling. However, you will need to write two sets of CSS rules to cover Blink and WebKit and also Firefox browsers.
How do I enable vertical scrolling in CSS?For vertical scrollable bar use the x and y axis. Set the overflow-x:hidden; and overflow-y:auto; that will automatically hide the horizontal scroll bar and present only vertical scrollbar. Here the scroll div will be vertically scrollable.
How do I hide the horizontal scrollbar in CSS but allow scrolling?Add overflow: hidden; to hide both the horizontal and vertical scrollbar.. body { overflow: hidden; /* Hide scrollbars */ } ... . body { overflow-y: hidden; /* Hide vertical scrollbar */ overflow-x: hidden; /* Hide horizontal scrollbar */ ... . /* Hide scrollbar for Chrome, Safari and Opera */ .example::-webkit-scrollbar {. |