javaScript 与 jquery 滚动条触底 实现

方法事件获取

/**
 * jq 获取函数
 */
$(window).height() 　              //浏览器时下窗口可视区域高度   
$(document).height()　           //浏览器时下窗口文档的高度   
$(document.body).height()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerHeight(true)　//浏览器时下窗口文档body的总高度 包括border padding margin   
$(window).width() 　   //浏览器时下窗口可视区域宽度   
$(document).width()   //浏览器时下窗口文档对于象宽度   
$(document.body).width()　　　　　　//浏览器时下窗口文档body的高度   
$(document.body).outerWidth(true)　//浏览器时下窗口文档body的总宽度 包括border padding  



/**
 * js 获取函数
 */

 HTML精确定位:  //scrollLeft,scrollWidth,clientWidth,offsetWidth   
 scrollHeight: //获取对象的滚动高度。   
 scrollLeft: //设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离   
 scrollTop:  //设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离   
 scrollWidth: //获取对象的滚动宽度   
 offsetHeight://获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度   
 offsetLeft: //获取对象相对于版面或由 offsetPsarent 属性指定的父坐标的计算左侧位置   
 offsetTop:  //获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置   
 event.clientX //相对文档的水平座标   
 event.clientY //相对文档的垂直座标   
 event.offsetX //相对容器的水平坐标   
 event.offsetY //相对容器的垂直坐标   
 document.documentElement.scrollTop// 垂直方向滚动的值   
 event.clientX+document.documentElement.scrollTop //相对文档的水平座标+垂直方向滚动的量 

 

原生JavaScript 获取滚动条 触底方法

/**
 *  原生JavaScript 获取滚动条 触底方法
 */

window.onscroll = function () {
    // 获取三高
    var wHeight = document.documentElement.clientHeight; //窗口高度
    var sHeight = document.documentElement.scrollTop || document.body.scrollTop;//滚动条高度
    var dHeight = document.documentElement.scrollHeight;//文档高度
    //   console.log(wHeight);
    //   console.log(sHeight);
    //   console.log(dHeight);
    if (wHeight + sHeight == dHeight) {
         //写逻辑的地方
    }
}

 

jq 获取滚动条 触底 方法

/**
 * jq 获取滚动条 触底 方法
 */
$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();  //当前滚动条
    var scrollHeight = $(document).height();  //内容可视区域的高度。
    var windowHeight = $(this).height();   //当前的高度。
    // console.log(scrollTop + windowHeight == scrollHeight)
    if (scrollTop + windowHeight == scrollHeight) {   //滚动条加可视窗口  ==  当前窗口  就触发
        //写逻辑的地方
    }
  });

 

自定义div 滚动条 触底 方法

/**
 * 自定义div 滚动条 触底 方法 
 */

// HTML 部分
<div id='scrilname' style="width: 100px;height: 50px; overflow: hidden; overflow-y: auto;">
     1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958  1236958
</div>

//js 部分

var scrilname = document.getElementById('scrilname');
scrilname.onscroll = function(){
    if(scrilname.scrollHeight -  scrilname.clientHeight == scrilname.scrollTop){
       //写逻辑的地方
    }
}