마우스 포인터와 스크롤의 좌표 취득에 관한 일

소개

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";
        }
    }
}

이제 마침내 잘 움직였습니다!
하고 싶을 수 있을 것 같고, 안심하고 있습니다.

여기까지 읽어 주셔서 감사합니다.

Reference

이 문제에 관하여(마우스 포인터와 스크롤의 좌표 취득에 관한 일), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/michimichix521/items/a64d48adf2f83790b670

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다