Hide Scrollbar From Browser

#css #beginners #tutorial #webdev

There are many times when we need to hide the scrollbar from the HTML elements. The uses can vary from person to person. It is opinionated topic to keep the scrollbar or not based on User Interactions(UI)/User ,Experience(UX).

Most of the time, I don't like to show the scrollbar to the user because of design practices I follow.

To achieve this, you just need to tickle with CSS to add some pseudo selectors for hiding it based on Browser's stylings

For Chrome:

/* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}

.element::-webkit-scrollbar { width: 0 !important }

For Firefox / Edge: (Checkout the firefox output and then GTG)

html {
    scrollbar-width: none;
}

Important Points to be considered before hiding the scroll bar:

Preferably Hide scrollbars only when if all content is visible else user may skip the content
Avoid horizontal scrolling on Web pages and do not hide horizontal scroll bar as they can make content difficult to read

Checkout the Codepen here 🚀

🌟 Twitter

👩🏻‍💻 suprabha.me

🌟 Instagram