LHJ

I'm a FE developer.

스크롤 높이 값 구하기 (scrollTop)

11 Oct 2020 » js_interactive_web

스크롤 높이 값 구하기 (scrollTop)

<!DOCTYPE html>
<html>
<head>
    <title>mouseOver</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        body {
            height: 10000px;
            background: linear-gradient(150deg, red, orange, yellow, green, indigo, purple, black);
        }
        h1 {
            color: #fff;
        }
    </style>
    <script>
        let scrollTop = 0;

        addEventListener("scroll", function (e) {
            scrollTop = document.documentElement.scrollTop;
            console.log("스크롤값 " + scrollTop);
        }, false)
    </script>
</head>
<body>
    <h1>스크롤</h1>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
    <title>mouseOver</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <style>
        body {
            height: 10000px;
            background: linear-gradient(150deg, red, orange, yellow, green, indigo, purple, black);
        }
        h1 {
            color: #fff;
        }
    </style>
    <script>
        addEventListener("scroll", function (e) {
            console.log("스크롤값 " + pageYOffset);
        }, false)
    </script>
</head>
<body>
    <h1>스크롤</h1>
</body>
</html>