Sitemap / Advertise

Information



Tags



Share

How to hide scrollbars but keep functionality in CSS

Advertisement:


read_later

Read Later

Keywords



Keywords



read_later

Read Later

Information

Tags

Share





Advertisement

Advertisement


Banggood
Banggood


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(1)

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

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:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sapien augue, suscipit eu interdum sit amet, mattis non neque. Quisque facilisis eget sapien ut pellentesque. Integer sit amet auctor libero. Cras a consequat ex. Cras feugiat ultrices consequat. Nunc condimentum urna vitae venenatis ullamcorper. Nam quis maximus nulla. Cras non rhoncus nulla. Ut gravida eget turpis in varius. Nulla non justo diam. Praesent a velit in massa luctus luctus. Phasellus imperdiet metus id congue lacinia. Nam at justo eleifend, malesuada nisl eu, commodo velit. Curabitur iaculis lobortis nulla, dictum tempor eros commodo a. Vestibulum et rhoncus odio.

Suspendisse elit erat, mollis non risus ac, suscipit luctus ex. Vestibulum sed metus dictum, luctus lorem vel, pulvinar augue. Phasellus lobortis mattis diam eu ullamcorper. In hac habitasse platea dictumst. Aliquam consequat tincidunt lorem, et sodales tellus blandit sed. Ut id iaculis arcu. Praesent feugiat non sapien et dapibus. Pellentesque aliquam tellus vitae massa feugiat, ut efficitur eros elementum. In laoreet neque nec magna dignissim viverra. Curabitur rutrum velit eu posuere vulputate. Sed neque dui, viverra vehicula bibendum vel, pellentesque sed nunc. Quisque euismod efficitur sagittis.

References

(1) https://developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar