practice

　　　　

<html>
<meta charset="utf-8">

<style>
img{width:484px;
height:484px;}
.サイズ_1{width:199px;
height:199px;
overflow:scroll;}
.サイズ_2{width:199px;
height:199px;
overflow:scroll;}
.サイズ_3{width:199px;
height:199px;
overflow:scroll;}
</style>

<div id="目印"class="サイズ_1"><img src="abcdef.jpg"></div>
<br><hr><br>

<p>垂直のスクロール: <span id="縦_2"style="color:blue;font-size:20px;font-weight:bold;">0</span></p>
<div id="目印_2"class="サイズ_2"><img src="abcdef.jpg"></div>
<p>水平のスクロール: <span id="横_2"style="color:red;font-size:20px;font-weight:bold;">0</span></p>

<script>
document.getElementById("目印_2").addEventListener("scroll",function()
{try{scrollLeft=this.scrollLeft;
document.getElementById("横_2").textContent=scrollLeft;
scrollTop=this.scrollTop;
document.getElementById("縦_2").textContent=scrollTop;}
catch(msg){}});
</script>
<br><hr><br>

<p>垂直のスクロール: <span id="縦_3"style="color:blue;font-size:20px;font-weight:bold;">0</span></p>
<div id="目印_3"class="サイズ_3"><img src="abcdef.jpg"></div>
<p>水平のスクロール: <span id="横_3"style="color:red;font-size:20px;font-weight:bold;">0</span></p>

<script>
document.getElementById("目印_3").addEventListener("scroll",function()
{try{scrollLeft=this.scrollLeft;
document.getElementById("横_3").textContent=scrollLeft;
scrollTop=this.scrollTop;
document.getElementById("縦_3").textContent=scrollTop;}
catch(msg){}});
横すくろーる_3=document.querySelector("#目印_3");
横すくろーる_3.addEventListener("wheel",(e)=>
{if(Math.abs(e.deltaY)<Math.abs(e.deltaX))return;
e.preventDefault();
横すくろーる_3.scrollLeft+=e.deltaY;});
</script>
<br><hr><br>

</html>