![webkit scrollbar button webkit scrollbar button](https://www.centerklik.com/wp-content/uploads/2014/03/ss-centerklik-scrollbar-desain.jpg)
Alternatively, use overflow: visible to show content that extends beyond the borders of the container. This hides all content beyond the element’s border. To prevent scrolling with this property, just apply the rule overflow: hidden to the body (for the entire page) or a container element. This property determines what to do with content that extends beyond the boundaries of its container. To hide the scrollbar and disable scrolling, we can use the CSS overflow property.
#WEBKIT SCROLLBAR BUTTON HOW TO#
How to Hide the Scrollbar in CSS (and Prevent Scrolling) Normally a scrollbar would appear in both of these cases, but our rules prevent this from happening on popular web browsers.
![webkit scrollbar button webkit scrollbar button](https://i.stack.imgur.com/eUQ9T.png)
See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by Christina Perricone ( on CodePen.
#WEBKIT SCROLLBAR BUTTON CODE#
See the Pen Hide the Scrollbar in CSS but Allow Scrolling (body) by Christina Perricone ( on CodePen.Īnd here is the same code applied to a element: Here’s what this code looks like when applied to the whole page: where element is the selector you want to target. ms-overflow-style: none /* for Internet Explorer, Edge */ĭisplay: none /* for Chrome, Safari, and Opera */ To hide the scrollbar and keep scrolling functionality, apply the following CSS to the body (for the entire page) or a specific element. However, this is possible with a few browser-specific CSS rules. How to Hide the Scrollbar in CSS (but Allow Scrolling)Īlas, there is no one dedicated CSS rule to hide the scrollbar while keeping the ability to scroll down a page/element. To meet your design needs, this guide will cover all of these methods. There are multiple ways to do this - hiding the scrollbar while allowing scrolling, hiding it while disabling scrolling, and keeping the scrollbar hidden only until it’s needed - some of which will work better based on your case. Whether for design or functionality reasons, it’s easy to hide the scrollbar on a page or page element with a bit of CSS. Designing a website exactly how you want often requires cutting out the excess - some whitespace here, an underline there, or, in today’s case, the scrollbar.