

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

	<div id="verticalscroll1">
		<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. */
}

#verticalscroll1{
	display: flex;
	flex-direction: row;
	width: 120px;
	height:300px; /* Change the height of the div here. Change the width to accomodate bigger elements. */
	background-color: blue; /* Change this to rgba(0,0,0,0) for a transparent background.*/
	.marquee{
		overflow: hidden;
		.scroller{
			font-size: 1px;
			padding-top: 0px;
			padding-bottom: 0px;
			display: inline-block;
			height: fit-content;
			min-height: 100%;
			animation: vertMarquee1 5s linear infinite;
				&:hover {
				animation-play-state: paused;
			}
		}
	}
	.mPause{
		overflow-y: scroll; 
		scrollbar-width: thin;
		.scroller{
			display: block;
			margin: auto;
		}
	}
}

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

</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>