Custom scrollbar (bug with width)

by PhilQ

HTML

<div id="test" class="scrollable scrollbar-1"><p>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis liberarcu. Vestibulum semper orci sed tortor mollis venenatis. Praesent ullamcorper sodales sagittis. Ut vitae quam massa. Donec a eros et libero porta ullamcorper. Vivamus sodales imperdiet erat a finibus. Sed faucibus dui in mollis tempor. Vivamus sed lectus euismod, condimentum sem sit amet, pharetra tortor. Aenean aliquet erat ac dolor convallis, non imperdiet urna vehicula. Pellentesque ut neque vitae elit commodo auctor vitae nec lacus. Phasellus mi ligula, placerat at lacus id, scelerisque hendrerit dolor. Pellentesque dapibus ex dictum leo mollis imperdiet. Quisque ante sapien, aliquet eget mollis a, vulputate nec lacus. Donec id lorem eget ipsum ornare maximus. Phasellus accumsan ligula cursus, imperdiet nisi ut, egestas risus. Morbi consequat dignissim magna, vel tincidunt est malesuada non.<br/>
	<br/>
	Vivamus suscipit massa tellus, id tincidunt sem pellentesque non. Etiam id mauris luctus, varius nibh id, rhoncus elit. Phasellus dapibus lectus urna, non venenatis lorem congue eu. Aenean sodales ullamcorper lorem, ac blandit diam hendrerit et. Duis rhoncus posuere dui. Nam auctor, nulla id mollis accumsan, ante lorem porta nibh, a consectetur ex lacus eu lacus. Aenean erat tellus, euismod at maximus nec, vulputate vitae orci. Praesent varius ex quis posuere ornare. Ut eros urna, malesuada at aliquam ut, condimentum quis dui. Curabitur pharetra interdum ante, at sagittis quam lacinia ac. Quisque non eleifend nunc.</p>
</div>

SCSS

*, *:before, *:after {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

#test {
	width: 500px;
	height: 250px;
	border: 1px solid red;
	
	p {
		width: 100%;
		display: inline-block;
		background: yellow;
	}
}


/**
 * Custom scrollbar styling
 */
$scrollbar-width: 14px;
$scrollbar-size: 8px;
$scrollbar-background: rgba(0,0,0, 0.1);
$scrollbar-color: blue;

.scrollable,
.scrollable-x,
.scrollable-y {
	overflow: hidden;
	position: relative;
	
	> div:first-child {
		position: absolute;
		top: 0px;
		bottom: 0px;
		left: 0px;
		right: -40px;
		box-sizing: content-box;
		overflow: hidden;
		overflow-y: scroll;
		// width: calc(100% - #{$scrollbar-width} + 40px);
		// width: calc(100% + 40px);
		// height: 100%;
		padding-right: 40px;
	}
}

.scrollbar-wrapper {
	display: inline-block;
	display: none;
	position: absolute;
	
	top: 0px;
	right: 0px;
	height: 100%;

	width: $scrollbar-width;
	background-color: $scrollbar-background;
	padding: ($scrollbar-width - $scrollbar-size) * 0.5;
	
	.scrollbar-outer {
		position: relative;
		display: inline-block;
		width: 100%;
		height: 100%;

		.scrollbar {
			display: inline-block;
			position: absolute;
			top: 0%;
			right: 0px;
			width: 100%;
			height: 0%;
			background-color: $scrollbar-color;
			border-radius: 0.5 * $scrollbar-size;
		}
	}
}

JavaScript

function initScrollbars() {
	$('.scrollable').each(function(i, el) {

		var $el = $( el );
		var $div = $('<div></div>')
		$el.append(
			//$('<div></div>').append(
				$div.append(
					$el.contents()
				)
			//)
		);
		
		var height = parseInt( Math.ceil( parseFloat( $div.outerHeight() ) ) );
		var scrollHeight = parseInt( Math.ceil( parseFloat( $div[0].scrollHeight ) ) );
		var ratio = (height / scrollHeight);

		var $scrollbar_wrapper = $('<div class="scrollbar-wrapper"></div>');
		var $scrollbar_outer = $('<div class="scrollbar-outer"></div>');
		var $scrollbar = $('<div class="scrollbar"></div>');
		$scrollbar.css('height', (ratio * 100) + '%');

		$scrollbar_wrapper.append( $scrollbar_outer );
		$scrollbar_outer.append( $scrollbar );
		$el.append( $scrollbar_wrapper );
	});
}

$( document ).ready(function() {

	initScrollbars();

});