Hello everyone,
Is there any way i could remove the scroll bars from my webpage? I usually work on a mac and the scroll bars are ok (hide) and appear when i use them. Now i am working on a windows and it looks awful all the scroll bars. How can i remove them?
Thanks,
Rodrigo
You control that with CSS.
html {
-ms-scroll-chaining: none !important;
overscroll-behavior: contain !important;
-ms-overflow-style: none !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
html::-webkit-scrollbar {
width: 0px !important;
}
html.show-scrollbars {
-ms-overflow-style: auto !important;
scrollbar-width: thin !important;
}
html.show-scrollbars::-webkit-scrollbar {
display: block !important;
width: 8px !important;
}
For a long time i hid all the scrollbars, but found there is a significant population that still want them, so I created a user option for them to show. Above defaults to scrollbar off, but if the show-scrollbars class is added then show them.
I should clarify this. The example above just has the html element, but in my actual usage, I specify each object explicitly. I can’t recall if that was a requirement, or “just the way I did it”, but I think it was a requirement. For example, if the element was in a modal, etc.
html,
#actual_pantry_item_body,
#actual_recipe_body,
#mini_recipe_body,
#recipe_list_display,
#kitchen_prep_scrolling,
#messages_scrolling,
#modal_recipe_preparation_tabs_content,
#modal_thread_body,
#public_empty,
#recipe_edit_tabs_content,
#scroll_cooking_mode_steps,
#all_ingredient_cooking_view,
#scrolling_nav_tags,
#leftover_list_display,
#scrolling_off_canvas_settings,
#user_notifications_body,
#each_user_notification {
-ms-scroll-chaining: none !important;
overscroll-behavior: contain !important;
-ms-overflow-style: none !important;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
html::-webkit-scrollbar,
#actual_pantry_item_body::-webkit-scrollbar,
#mini_recipe_body::-webkit-scrollbar,
#actual_recipe_body::-webkit-scrollbar,
#recipe_list_display::-webkit-scrollbar,
#kitchen_prep_scrolling::-webkit-scrollbar,
#messages_scrolling::-webkit-scrollbar,
#modal_recipe_preparation_tabs_content::-webkit-scrollbar,
#modal_thread_body::-webkit-scrollbar,
#public_empty::-webkit-scrollbar,
#recipe_edit_tabs_content::-webkit-scrollbar,
#scroll_cooking_mode_steps::-webkit-scrollbar,
#all_ingredient_cooking_view::-webkit-scrollbar,
#scrolling_nav_tags::-webkit-scrollbar,
#leftover_list_display::-webkit-scrollbar,
#scrolling_off_canvas_settings::-webkit-scrollbar,
#user_notifications_body::-webkit-scrollbar,
#each_user_notification::-webkit-scrollbar {
width: 0px !important;
}
html.show-scrollbars,
html.show-scrollbars #actual_pantry_item_body,
html.show-scrollbars #actual_recipe_body,
html.show-scrollbars #mini_recipe_body,
html.show-scrollbars #recipe_list_display,
html.show-scrollbars #kitchen_prep_scrolling,
html.show-scrollbars #messages_scrolling,
html.show-scrollbars #modal_recipe_preparation_tabs_content,
html.show-scrollbars #modal_thread_body,
html.show-scrollbars #public_empty,
html.show-scrollbars #recipe_edit_tabs_content,
html.show-scrollbars #scroll_cooking_mode_steps,
html.show-scrollbars #all_ingredient_cooking_view,
html.show-scrollbars #scrolling_nav_tags,
html.show-scrollbars #leftover_list_display,
html.show-scrollbars #scrolling_off_canvas_settings,
html.show-scrollbars #user_notifications_body,
html.show-scrollbars #each_user_notification {
-ms-overflow-style: auto !important;
scrollbar-width: thin !important;
}
html.show-scrollbars::-webkit-scrollbar,
html.show-scrollbars #actual_pantry_item_body::-webkit-scrollbar,
html.show-scrollbars #actual_recipe_body::-webkit-scrollbar,
html.show-scrollbars #mini_recipe_body::-webkit-scrollbar,
html.show-scrollbars #recipe_list_display::-webkit-scrollbar,
html.show-scrollbars #kitchen_prep_scrolling::-webkit-scrollbar,
html.show-scrollbars #messages_scrolling::-webkit-scrollbar,
html.show-scrollbars #modal_recipe_preparation_tabs_content::-webkit-scrollbar,
html.show-scrollbars #modal_thread_body::-webkit-scrollbar,
html.show-scrollbars #public_empty::-webkit-scrollbar,
html.show-scrollbars #recipe_edit_tabs_content::-webkit-scrollbar,
html.show-scrollbars #scroll_cooking_mode_steps::-webkit-scrollbar,
html.show-scrollbars #all_ingredient_cooking_view::-webkit-scrollbar,
html.show-scrollbars #scrolling_nav_tags::-webkit-scrollbar,
html.show-scrollbars #leftover_list_display::-webkit-scrollbar,
html.show-scrollbars #scrolling_off_canvas_settings::-webkit-scrollbar,
html.show-scrollbars #user_notifications_body::-webkit-scrollbar,
html.show-scrollbars #each_user_notification::-webkit-scrollbar {
display: block !important; /* Or 'initial', depending on browser support */
width: 8px !important;
}
This should hide scroll bars while still allowing scrolling.
/* For modern browsers */
body {
overflow: auto;
scrollbar-width: none; /* Firefox */
}
body::-webkit-scrollbar {
display: none; /* Chrome, Safari, Edge */
}
Thanks for your response, was very helpful!
Thanks Brian!
You’re welcome. If you intend on using scrollable modals or creating your own scrollable areas using overflow: auto, etc., you’ll have to add a css selector to specify those elements as they won’t be hidden when using just body.
Yeah, i understand. Thanks. Have a good day!
I know this topic has been answered, but I could not help myself to show some markup hygiene. As @mebeingken subtly pointed out
Why the Scrollbar Is ShowingThe scrollbar appears because the sidebar container likely has overflowing content or a CSS rule that triggers it unnecessarily. Common culprits:
overflow: auto or overflow: scroll applied to the sidebar containervh unit that doesn’t accommodate all child elementsEven if the content fits visually, the browser might still render a scrollbar if there's a fractional pixel overflow or rounding error—especially in high-DPI environments.
How to Remove the Scrollbar (Safely)Here’s a surgical approach to remove it only when it’s not needed, preserving layout hygiene:
.sidebar {
overflow-y: auto; /* or hidden if you're sure no scroll is needed */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE 10+ */
}
.sidebar::-webkit-scrollbar {
display: none; /* Chrome, Safari */
}
But before applying this, audit the container:
Why Removing Scrollbars Globally Is Bad UXScrollbars are functional indicators. Removing them across the board can:
Hide affordances: Users won’t know content is scrollable Break accessibility: Keyboard and screen reader users rely on scroll feedback Cause layout shifts: Invisible scrollbars can affect width calculations Confuse users: Especially on touchpads or mobile where scroll feedback is subtleInstead of removing scrollbars globally, target specific containers where scroll isn’t needed and document the rationale. That’s the kind of reproducible hygiene your onboarding guides thrive on.
Your post was amazingly helpful Ben, thank you for that!
If you want to try new custom minimalistic scrollbar, this is a custom scrollbar I’m using in my projects.
Bootstrap 5.3.3 local.
/* Scrollbar Styles */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 9999px;
background-color: var(--bs-secondary-color);
-webkit-transition: background-color var(--transition-speed) var(--transition-easing);
transition: background-color var(--transition-speed) var(--transition-easing);
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--bs-emphasis-color);
}