Make elements scrollable with custom scrollbars

OK so we’re going to go through a quick case study of creating a element which scrolls up and down inside a frame. The main thing to remember here is to set a height for the frame, so the starting point for scrolling is set. If the frame does not have a defined height or max-height value it will default to height:auto and no matter what you do, your element will not scroll.

Firstly let’s consider the html, we need to have an element acting as the frame, and then the element which will scroll within. As you can see below I have added a list within as example content.

<div id="scroll-frame" class="frame">
	<div class="scrolling-element">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</div>

All nice and straighforwards so far, now we’re now going to use css to limit the size of the frame – by defining the height, setting overflow:hidden and position:relative. This would go in the stylesheet somewhere but you already knew that!

.frame {
	display: block;
	width: 100%;
	height: 100px;
	overflow: hidden;
	position: relative;
}

OK cool, our frame is set, next up lets organise the scrolling element so it can scroll vertically. This is via the overflow-y setting which we’re changing from visible to auto, affecting the y axis (vertical) to scroll left to right you would need overflow-x, or to do both it wold just be overflow. Setting these to ‘auto’ means the scrollbar only appears if the scrolling element height is greater than the frame height, to make the scrollbars appear all the time swap ‘auto’ to ‘scroll’. I’ve also added some styles below to pad out the list so it will be bigger than the frame.

.scrolling-element {
	position: relative;
	height: 100%;
	overflow-y: auto;
	padding-right: 24px;
}

.scrolling-element  ul {
	font-size: 16px;
	margin: 1em;
	padding: 0;		
}

.scrolling-element li {
	display: block;
	padding: 0.5em;
}

There we go, should a be a nice little scrollbar in operation with the frame now only thing is it is totally out of sync with the rest of the page design. Not to worry using the -webkit-scrollbar pseudo elements (-webkit-scrollbar, -webkit-scrollbar-button, -webkit-scrollbar-track, -webkit-scrollbar-track-piece, -webkit-scrollbar-thumb, -webkit-scrollbar-corner and -webkit-resizer ) we can style it up in no time. There are tons of options here due the 10 or so pseudo class state controllers, which I won’t go into here.

.scrolling-element::-webkit-scrollbar { width: 10px; }

.scrolling-element::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #000000;
}
 
.scrolling-element::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
	background: #111111;
}

There we have it, to put together more complicated scrollbars I would suggest having a squiz at this super useful site: Webkit Scrollbar Generator.