JS滚动条位置，顶部，底部，触发事件

最新推荐文章于 2021-12-27 00:39:30 发布

web_blog

最新推荐文章于 2021-12-27 00:39:30 发布

阅读量573

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_43248623/article/details/107959315

版权

javascript 专栏收录该内容

51 篇文章 0 订阅

订阅专栏

效果图:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>JS滚动条位置，顶部，底部，触发事件</title>
  </head>
  <body>
    <style>
      body {
        margin: 0;
        padding: 0;
        height: 200vh;
      }
    </style>
    <script>
      function getScrollTop() {
        var scrollTop = 0,
          bodyScrollTop = 0,
          documentScrollTop = 0;
        if (document.body) {
          bodyScrollTop = document.body.scrollTop;
        }
        if (document.documentElement) {
          documentScrollTop = document.documentElement.scrollTop;
        }
        scrollTop =
          bodyScrollTop - documentScrollTop > 0
            ? bodyScrollTop
            : documentScrollTop;
        return scrollTop;
      }
      console.log(
        "被卷曲的头",
        document.body.scrollTop,
        document.documentElement.scrollTop
      );

      function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowHeight = document.body.clientHeight;
        }
        return windowHeight;
      }

      console.log(
        "客户端可视区域高度",
        document.body.clientHeight,
        document.documentElement.clientHeight
      );

      // 文档的总高度
      function getScrollHeight() {
        var scrollHeight = 0,
          bodyScrollHeight = 0,
          documentScrollHeight = 0;
        if (document.body) {
          bodyScrollHeight = document.body.scrollHeight;
        }
        if (document.documentElement) {
          documentScrollHeight = document.documentElement.scrollHeight;
        }
        scrollHeight =
          bodyScrollHeight - documentScrollHeight > 0
            ? bodyScrollHeight
            : documentScrollHeight;
        return scrollHeight;
      }
      console.log(
        "文档总高度",
        document.body.scrollHeight,
        document.documentElement.scrollHeight
      );

      window.onscroll = function() {
        if (getScrollTop() == 0) {
          console.log("顶部");
        }

        if (getScrollTop() + getWindowHeight() == getScrollHeight()) {
          console.log("已经到最底部了！!");
        }
      };
    </script>
  </body>
</html>

web_blog

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS滚动条位置，顶部，底部，触发事件

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <titl
复制链接

扫一扫