

<html>
<button style = "width:120px;" onclick="revertMarquee()">Toggle Marquee</button>
	<p>Exhibit 2: Horizontal / Becomes Scrollable </p>

	<div id="scrollable">
		<div class="marquee"> 
			<div class = "scroller">
				<span style="width: 100%">
					<!--Example button divs.-->
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					<div class="buttonn"></div>
					
				</span>
			</div>
		</div>
	</div>

</html>


<style>
.buttonn{
	margin: 3px; /* change the distance between buttons*/
	width: 88px;
	height: 31px;
	min-width: 88px;
	min-height: 31px;
	background-color: black;  /* Example button divs. */
}

#scrollable{
	width: 800px; /* Width of the element */
	.marquee {
		width: 100%;
		background: green; /* Change this to rgba(0,0,0,0) if you want transparent background. */
		white-space: nowrap;
		overflow: hidden;
		.scroller {
			padding-left: 100%;
			display: inline-block;
			animation: horizMarquee 10s linear infinite; /* Change the marquee timing here */
				&:hover {
				animation-play-state: paused;
			}
			span{
				display: flex;  
				flex-direction: row; 
				width: 100%;
			}
		}
	}
	.mPause{
		display:block;
		width: 100%;
		background: green;/* Change this to rgba(0,0,0,0) if you want transparent background. */
		white-space: nowrap;
		margin: auto;
		overflow-x: scroll;
		scrollbar-width: thin; /* Control the scrollbar here */
		.scroller{
			display: block;
			margin: auto;
			span{
				display: flex;  
				flex-direction: row; 
				width: 100%;
			}
		}
	}
}

@keyframes horizMarquee {
  100% {
    transform: translate(-100%, 0);
  }
}

</style>

<script>

function revertMarquee(){
  var i, tablinks;
  tablinks = document.getElementsByClassName("marquee") 
  
  if(tablinks.length != 0){
	while (tablinks.length > 0) {
			tablinks[0].className = tablinks[0].className.replace("marquee", "mPause")
			console.log("marquee off")
	}
  }
  else{
	tablinks = document.getElementsByClassName("mPause");
	while (tablinks.length > 0) {
			tablinks[0].className = tablinks[0].className.replace("mPause", "marquee")
			console.log("marquee on")
	}
  }
}

</script>