scroll example

by YuHan Chien

HTML

<div class="myDIV">
  <div class="content">Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!Scroll inside me!</div>
</div>

<div class="myDIV">
  <div class="content">Scroll inside me!</div>
</div>

<div class="myDIV">
  <div class="content">Scroll inside me!</div>
</div>

<div id="right" class="button">right</div>
<div id="left" class="button">left</div>

CSS

.myDIV {
    height: 50px;
    width: 250px;
    overflow: hidden;
    scroll-behavior: smooth;
    margin-top: 30px;
}

.content {
    height: 800px;
    width: 2000px;
    background-color: coral;
}

.button {
	height: 80px;
    width: 160px;
    background-color: mistyrose;
    margin-top: 10px;
}

JavaScript

function myFunction() {
    var elmnt = document.getElementById("myDIV");
    var x = elmnt.scrollLeft;
    var y = elmnt.scrollTop;
    document.getElementById ("demo").innerHTML = "Horizontally: " + x + "px<br>Vertically: " + y + "px";
}
/*
document.querySelectorAll(".myDIV").addEventListener('click', function(){
    var elmnt = document.querySelectorAll(".myDIV");
    elmnt.scrollLeft = 300;
    elmnt.scrollTop = 300;
	//console.log(x , y);
})*/
let xx = document.querySelector("#right");
let yy = document.querySelector("#left");
//Array.from(xx).map((elemt)=>{
	xx.addEventListener('click', function(){
      var elmnt = document.querySelectorAll(".myDIV");
      Array.from(elmnt).map((x)=>{
      	x.scrollLeft += 300;
        var num = x.scrollLeft;
      	console.log(num);
      })
      //elmnt.scrollTop = 300;
  	})
//})
	yy.addEventListener('click', function(){
      var elmnt = document.querySelectorAll(".myDIV");
      Array.from(elmnt).map((x)=>{
      	x.scrollLeft -= 300;
        var num = x.scrollLeft;
      	console.log(num);
      })
      //elmnt.scrollTop = 300;
  	})
    
    
    var elmnt = document.querySelectorAll(".myDIV");
      Array.from(elmnt).map((x)=>{
      	x.scrollLeft += 300;
      })