<div class="container">
	<div class="pager left">&larr;</div>
	<div class="scroller">
		<div class="content">
		</div>
	</div>
	<div class="pager right">&rarr;</div>
</div>
* {
	box-sizing: border-box;
}

.container {
	background-color: gray;
	text-align: center;
	font-size: 0; // hack to remove whitespace
}

.scroller {
	width: 200px;
	overflow: hidden;
	overflow-x: auto;
	display: inline-block;
	-webkit-overflow-scrolling: touch;
}

.pager {
	width: 50px;
	height: 50px;
	background-color: blue;
	vertical-align: top;
	font-size: 1rem;
	color: white;
	padding: 15px 0;
	opacity: 0;
	display: inline-block;
	cursor: default;
	
	&.show {
		opacity: 1;
		cursor: pointer;
	}
}

.content {
	width: 600px;
	height: 50px;
	background: linear-gradient(
		to right,
		red 0,
		red 25%,
		yellow 25%,
		yellow 50%,
		red 50%,
		red 75%,
		yellow 75%,
		yellow 100%);
}
View Compiled
var scroller = $('.scroller').get(0);

$('.pager.left').click(function() {
	$(scroller).animate({
		scrollLeft: scroller.scrollLeft - 50
	}, 200);
});

$('.pager.right').click(function() {
	$('.scroller').animate({
		scrollLeft: scroller.scrollLeft + 50
	}, 200);
});

function handleScroll() {
	$('.pager').removeClass('show');
	
	// left scroll button
	if (scroller.scrollLeft > 0) {
		$('.pager.left').addClass('show');
	}
	
	// right scroll button
	if (scroller.scrollLeft !== (scroller.scrollWidth - scroller.clientWidth)) {
		$('.pager.right').addClass('show');
	}
	
}

// set scroll event handler
scroller.onscroll = $.debounce(250, handleScroll);

// call first time to initialize
handleScroll();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js