How to hide scrollbars but keep functionality in CSS

Read Later

Select Discard

Information

Views: 5204 CSS By Kutluhan Aktar

Tags

Scrollbar CSS Pseudo-element Property -ms-overflow-style ::-webkit-scrollbar

Share

• Share
• Share
• Share
• Share
• Share

Definition

In this tutorial, I will show you how to hide scrollbars but keep scrolling if you need to create a user dashboard or menu without scrollbars for designing purposes.

CSS Scrollbar Selectors⁽¹⁾

You can use the following pseudo elements to customize various parts of the scrollbar for webkit browsers:

• ::-webkit-scrollbar — the entire scrollbar.
• ::-webkit-scrollbar-button — the buttons on the scrollbar (arrows pointing upwards and downwards).
• ::-webkit-scrollbar-thumb — the draggable scrolling handle.
• ::-webkit-scrollbar-track — the track (progress bar) of the scrollbar.
• ::-webkit-scrollbar-track-piece — the part of the track (progress bar) not covered by the handle.
• ::-webkit-scrollbar-corner — the bottom corner of the scrollbar, where both horizontal and vertical scrollbars meet.
• ::-webkit-resizer — the draggable resizing handle that appears at the bottom corner of some elements.

Note: IE and Edge supports the -ms-overflow-style: property, which allows us to hide the scrollbar, but keep functionality.

Code

Add the ability to scrolling to the hide div element using the overflow-y property.

Design the hide div element - background color, border, margin, and padding.

Choose the cursor type.

To hide the scrollbar in IE and EDGE, use the -ms-overflow-style property.

For other browsers (webkit browsers) except for Firefox, use the ::-webkit-scrollbar pseudo element.

------------ CSS ------------

.hide{
	overflow-y:auto;
	background-color:lightblue;
	height:250px;
	width:70%;
	margin:auto;
	padding:10px;
	border:5px solid white;
	border-radius:20px;
	cursor:all-scroll;
	-ms-overflow-style: none;
}

.hide::-webkit-scrollbar {
  display: none;
}


.hide p{
	color:#002699;
}

Result:

References

⁽¹⁾ https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar