zoukankan      html  css  js  c++  java
  • HTML页面滑动到最底部触发事件

    其实基本原理做一个判断,如果 页面总高度  =  视口高度  +  浏览器窗口上边界内容高度 ,那么就是把页面滑动到了最低部,然后执行一个事件。

    //要触发的事件(自己定义事件的内容)

      function ajax_function() {
        window.location.href = 'http://baidu.com';
      }

      var timeoutInt; // 要保证最后要运行一次

      // window.onscroll窗口添加滚动条事件
      window.onscroll = function () {
        setTimeout(function () {
          if (timeoutInt != undefined) {
            window.clearTimeout(timeoutInt);
          }
          timeoutInt = window.setTimeout(function () {
            //监听事件内容
            if(getScrollHeight() == getDocumentTop() + getWindowHeight()){
              //当滚动条到底时,这里是触发内容
              //异步请求数据,局部刷新dom
              ajax_function()//调用上面自定义的事件函数。
            }
          }, 105);
        }, 100);
      }

      //(浏览器窗口上边界内容高度)
      function getDocumentTop() {
        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;
        console.log("scrollTop:"+scrollTop);
        return scrollTop;
      }

      //可视窗口高度(屏幕可以看见的高度)
      function getWindowHeight() {
        var windowHeight = 0;
        if (document.compatMode == "CSS1Compat") {
          windowHeight = document.documentElement.clientHeight;
        } else {
          windowHeight = document.body.clientHeight;
        }
        console.log("windowHeight:"+windowHeight);
        return windowHeight;
      }

      //滚动条滚动高度(即整个网页的高度)
      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;
        console.log("scrollHeight:"+scrollHeight);
        return scrollHeight;
      }

  • 相关阅读:
    VS Visual Studio connection(); Microsoft Visulal Studio vNext & Azure
    无废话WCF入门教程六[一个简单的Demo]
    JS代码混淆 支持PHP .NET PERL
    C#/vbscript/JS如何加密保护HTML/javascript源代码
    JavaScript加密解密7种方法总结分析
    模型融合---Stacking调参总结
    模型融合---Xgboost调参总结
    模型融合---GBDT调参总结
    为什么正则化可以减小过拟合?
    python中的filter、map、reduce、apply用法
  • 原文地址:https://www.cnblogs.com/hermit-gyqy/p/11063180.html
Copyright © 2011-2022 走看看