Hide scrollbar, but still scrollable (using CSS)

 I made a post about this topic by using javascript on mouse wheel event, then by calculating delta status we can trigger function that performs scroll up/down via window.scrollTo object. Use layer element. This is a neat technique since we can adjust layer positions = top, left, and.. right to hide the scroll bar when not needed. 

Actually, it’s a good technique, I use it since 2007, but the challenges are:
– different delta calculations for different browser
– need a decent function to perform a good/realistic mouse scroll up/down response.

I found somewhere on the internet the other technique, using CSS. Fewer codes, cross-browser, and use the native mouse scrolling feature, here are the codes

<html>
	<head>
		<style>
		html, body {
			padding: 0;
			margin: 0;
		 	overflow: hidden;
		}
		#container {
			position: absolute;
			left: 0;
			top: 0;
			right: -30px;
			bottom: 0;	
			padding-right: 15px;
			overflow-y: scroll;
		}
		</style>
	</head>
	<body>
		<div id="container">
			<!-- lines, lines, lines -->
		</div>
	</body>
</html>

How it works:

1. Kill HTML and body scrollbar (hidden overflow)

2. The scrollbar mostly has 30px width. -30px means adding more 30px to the right, the layer’s scrollbar will be invisible to the user.

3. Enable the layer’s scrollbar (overflow-y: scroll)

Hope it works for you


Comments

Post a Comment