javaScript 与 jquery 滚动条触底 实现

互联网 2021/10/14 11:14:44

方法事件获取/*** jq 获取函数*/ $(window).height()   //浏览器时下窗口可视区域高度 $(document).height()  //浏览器时下窗口文档的高度 $(document.body).height()      //浏览器时下窗口文档body的高度 $(document.body).ou…

方法事件获取

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

  

随时随地学软件编程-关注百度小程序和微信小程序
关于找一找教程网

本站文章仅代表作者观点,不代表本站立场,所有文章非营利性免费分享。
本站提供了软件编程、网站开发技术、服务器运维、人工智能等等IT技术文章,希望广大程序员努力学习,让我们用科技改变世界。
[javaScript 与 jquery 滚动条触底 实现]http://www.zyiz.net/tech/detail-241280.html

上一篇:JAVA对象使用JSON工具等转字符串时间格式自动转时间戳问题

下一篇:结队编程分析

赞(0)
关注微信小程序
程序员编程王-随时随地学编程

扫描二维码或查找【程序员编程王】

可以随时随地学编程啦!

技术文章导航 更多>
扫一扫关注最新编程教程