The only other solution is to "hide" the scrollbar via overlapping. If you’re going to remove it, be sure to do this intentionally and in a way that aids your design.Hide scrollbar in iframe, while still scrolling scrolling="no" For many users, the scrollbar is a handy visual cue that supports navigation. However, keep in mind that just because you can, it doesn’t mean that you should. Whether you’re building a page with pure CSS or a framework like Bootstrap, it only takes a few rules to hide the scrollbar from your page. See the Pen Hide the Scrollbar Until Needed by Christina Perricone ( on CodePen. To enable this in CSS, use the overflow: auto rule. User testing can clarify how a missing scrollbar impacts your site’s user experience, but a good compromise in many cases is to hide the scrollbar until the user initiates scrolling. Unless you have some other visual indicator that there is more content left to see, a lack of scrollbar could be off-putting. Also, scrollbars tell us how much of the page we have left to view (unless infinite scroll is implemented). So, if you apply this method to an entire page, it might seem strange to some. Most visitors associate the activity of scrolling with a visible scrollbar. But in others, removing this part of the page can actually harm the user experience. Hiding the scrollbar might aid your design in some cases. See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow-x: hidden) by Christina Perricone ( on CodePen. To hide the horizontal scrollbar and prevent horizontal scrolling, use overflow-x: hidden: Since horizontal scrolling is generally a bad idea, this rule can come in handy. How to Hide the Horizontal Scrollbar in CSS ![]() See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow-y: hidden) by Christina Perricone ( on CodePen. To hide the vertical scrollbar and prevent vertical scrolling, use overflow-y: hidden like so: How to Hide the Vertical Scrollbar in CSS As we’ll see next, you can also disable only horizontal scrolling or only vertical scrolling. This disables both vertical and horizontal scrolling. See the Pen Hide the Scrollbar in CSS and Prevent Scrolling (overflow: hidden) by Christina Perricone ( on CodePen. 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. 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. See the Pen Hide the Scrollbar in CSS but Allow Scrolling (div) by Christina Perricone ( on CodePen. 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.
1 Comment
|
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |