はじめに
HTML、CSS、JavaScriptでマウスポインタとスクロールの座標の取得に関してです。
実装するまでに思ったより時間がかかってしまったので、できたものをメモ的な感じで、この記事にまとめました。
結果的に、以下のようなものができました。
右上に、マウスポインタとスクロールの座標値が表示されています。
縦にスクロールすると、スクロールのYの値に応じて、ボックスが動きます。
また、マウスポインタのx座標が500を境に背景の色が変わるようになっています。
ソースコード
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>マウスポインタとスクロールの座標変化</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="coordinate">
<div class="P_X">Pointer_X</div>
<div class="P_Y">Pointer_Y</div>
<div class="S_X">Scroll_X</div>
<div class="S_Y">Scroll_Y</div>
</div>
<div class="scrollX_box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<script src="main.js"></script>
</body>
</html>
styles.css
body{
margin:0;
background-color:aquamarine;
}
.coordinate{
z-index:1;
width:100%;
display:flex;
flex-direction:column;
text-align:right;
position:fixed;
}
.scrollX_box{
width:2000px;
height:300px;
background-color:pink;
}
.box{
width:300px;
height:300px;
}
.box:nth-of-type(3n){
background-color:orange;
}
.box:nth-of-type(3n+1){
background-color:skyblue;
}
.box:nth-of-type(3n+2){
background-color:tomato;
}
.move{
transition-duration:2s;
transform:translateX(500px);
}
main.js
"use strict";
{
const UPDATE=window.setInterval(update,20);
const BODY=document.body;
const P_X=document.querySelector(".P_X");
const P_Y=document.querySelector(".P_Y");
const S_X=document.querySelector(".S_X");
const S_Y=document.querySelector(".S_Y");
const BOXES=document.querySelectorAll(".box");
let px,py;
let sx,sy;
//マウスポインタの座標の取得
window.addEventListener("mousemove",(e)=>{
px=e.pageX;
py=e.pageY;
P_X.textContent="Pointer_X:"+px;
P_Y.textContent="Pointer_Y:"+py;
});
//スクロールの座標の取得
window.addEventListener("scroll",(e)=>{
sx=pageXOffset;
sy=pageYOffset;
S_X.textContent="Scroll_X:"+sx;
S_Y.textContent="Scroll_Y:"+sy;
},{passive:true});
function update(){
//縦スクロールによって、ボックスが移動する処理
for(let i=0;i<BOXES.length;i++){
if((i+1)*300<=sy && sy<(i+2)*300){
BOXES[i].classList.add("move");
}else{
BOXES[i].classList.remove("move");
}
}
//マウスポインタのx座標が500を境に背景の色が変わる処理
if(px<500){
BODY.style.backgroundColor="aquamarine";
}else{
BODY.style.backgroundColor="limegreen";
}
}
}
これでやっとうまく動きました！
やりたいことができそうで、ほっとしています。
ここまで読んでいただき、ありがとうございました。