javaScript 与 jquery 滚动条触底 实现

Posted 2021-10-14 前端搬运工

方法事件获取

/**
 * 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){
       //写逻辑的地方
    }
}

　　

(document).height()与$(window).height()的区别，以及如何判断滚动条是否触顶或触底

 jQuery(window).height()代表了当前可见区域的大小，而jQuery(document).height()则代表了整个文档的高度，可视具体情况使用.

  注意当浏览器窗口大小改变时(如最大化或拉大窗口后) jQuery(window).height() 随之改变，但是jQuery(document).height()是不变的。

 

$(document).scrollTop() 获取垂直滚动的距离  即当前滚动的地方的窗口顶端到整个页面顶端的距离
$(document).scrollLeft() 这是获取水平滚动条的距离

要获取顶端 只需要获取到scrollTop()==0的时候  就是顶端了

要获取底端 只要获取scrollTop()>=$(document).height()-$(window).height()  就可以知道已经滚动到底端了

$(document).height()  //是获取整个页面的高度
$(window).height()  //是获取当前 也就是你浏览器所能看到的页面的那部分的高度  这个大小在你缩放浏览器窗口大小时 会改变 与document是不一样的  根据英文应该也能理解吧

自己做个实验就知道了 
$(document).scroll(function(){
    $("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一个固定的span标记 滚动时方便查看-->