`
kt431128
  • 浏览: 39144 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js判断滚轮是否到达页面的底部

 
阅读更多
// JavaScript Document
/********************
* 取窗口滚动条高度
******************/
function getScrollTop()
{
    var scrollTop=0;
    if(document.documentElement&&document.documentElement.scrollTop)
    {
        scrollTop=document.documentElement.scrollTop;
    }
    elseif(document.body)
    {
        scrollTop=document.body.scrollTop;
    }
    return scrollTop;
}
 
 
/********************
* 取窗口可视范围的高度
*******************/
function getClientHeight()
{
    var clientHeight=0;
    if(document.body.clientHeight&&document.documentElement.clientHeight)
    {
        var clientHeight =(document.body.clientHeight<document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;        
    }
    else
    {
        var clientHeight =(document.body.clientHeight>document.documentElement.clientHeight)?document.body.clientHeight:document.documentElement.clientHeight;    
    }
    return clientHeight;
}
 
/********************
* 取文档内容实际高度
*******************/
function getScrollHeight()
{
    returnMath.max(document.body.scrollHeight,document.documentElement.scrollHeight);
}
 
function test(){
        if(getScrollTop()+getClientHeight()==getScrollHeight()){
                alert("到达底部");
        }else{
                alert("没有到达底部");
        }
}
 
 
//------------------------判断窗体滚动条到达底部----------------------------
 
function reachBottom(){
        var scrollTop =0;
        var clientHeight =0;
        var scrollHeight =0;
        if(document.documentElement && document.documentElement.scrollTop){
                scrollTop = document.documentElement.scrollTop;
        }elseif(document.body){
        scrollTop = document.body.scrollTop;
        }
        if(document.body.clientHeight && document.documentElement.clientHeight){
                clientHeight =(document.body.clientHeight < document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight;
        }else{
                clientHeight =(document.body.clientHeight > document.documentElement.clientHeight)? document.body.clientHeight : document.documentElement.clientHeight;
        }
        scrollHeight =Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);
        if(scrollTop + clientHeight == scrollHeight){
                returntrue;
        }else{
                returnfalse;
        }
}
 
 
 
//-----------------判断DIV滚动条到达底部-----------------------
 function sc(){
           var e=document.getElementById('pop_contenter_id');
            if(e.scrollTop>0){
                        var heigh=e.offsetHeight+e.scrollTop;
                        if(heigh>e.scrollHeight-30){
                            alert('到底了  大概的。');
                    }
                }
}

var s=setInterval("sc('{$url}')",4000);

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    鼠标滚轮到最底端继续加载新数据思路

    2. **判断滚动位置**:为了确定用户是否到达页面底部,通常会设置一个阈值,比如距离页面底部一定像素距离时,视为到达底部。这个阈值可以根据实际页面布局和内容长度进行调整。 3. **异步加载**:当触发加载新数据...

    vue scroll滚动判断的实现(是否滚动到底部、滚动方向、滚动节流、获取滚动区域dom元素)

    以上就是 Vue.js 中实现滚动判断的几个关键知识点,包括判断是否滚动到底部、检测滚动方向、滚动节流以及获取滚动可视区域内的 DOM 元素。这些技巧能够帮助你创建更流畅、更高效的滚动交互体验。

    autoscroll:添加用于滚动到网页底部的按钮

    当用户点击按钮时,`scrollTo`函数被调用,其中`0`代表水平滚动位置(在这里我们不需要),`document.body.scrollHeight`则表示文档的总高度,将视窗滚动到这个位置即可到达页面底部。 为了优化用户体验,可以考虑...

    阻止滚动条事件冒泡

    // 判断是否滚动到底部或顶部,执行相应操作 } }); ``` 在这个例子中,`myElement`是具有滚动条的元素。当用户滚动这个元素时,`mousewheel`事件会被触发,然后通过`event.stopPropagation()`阻止事件继续向父...

    支持h5,pc端的和手机端的触底刷新插件.zip

    1. **JavaScript代码**:这是实现触底刷新功能的核心部分,包括定义事件监听器、判断用户是否到达页面底部的逻辑以及与服务器通信的函数。 2. **CSS样式**:为了确保刷新动画的平滑性和视觉一致性,插件可能包含...

    jQuery上下滑动加载刷新插件iscroll.js

    对于动态加载,iscroll.js通过监听滚动位置,判断是否到达页面底部,触发加载新内容的回调函数。 ### IV. 集成与应用 要使用iscroll.js,首先需要将其下载到项目中,然后在HTML文件中引入js文件。接着,创建一个...

    无间隙循环滚动鼠标浮动停止滚动

    标题中的“无间隙循环滚动鼠标浮动停止滚动”指的是在网页或软件界面中,当用户使用鼠标滚轮进行滚动操作时,页面能够实现无间隔、连续的循环滚动,并且当鼠标浮动到页面顶部或底部时,滚动能自动停止,提供一种平滑...

    ScrollPage.rar

    开发者可以监听这个事件,判断是否到达页面底部,如果到达,则向服务器发送请求获取更多内容。 2. **实现方法**: - **jQuery插件**:如`infinite-scroll`插件,提供了简单的API和配置选项,使得实现滚动加载变得...

    webapp滚动 上下滑动加载数据

    2. 使用jQuery监听滚动事件,判断是否到达页面底部。 3. 当到达底部时,通过Ajax发送请求到服务器。 4. 服务器端处理请求,返回新的数据。 5. 客户端接收到数据后,将其插入到页面的适当位置。 整个过程中,性能...

    Iscroll滚动分页

    2. **监听滚动事件**:通过监听scrollEnd事件,判断是否达到分页加载条件,如到达页面底部。 3. **动态插入内容**:加载新数据后,应动态插入到页面相应位置,而非替换现有内容。 4. **性能优化**:合理设置分页大小...

    基于iScroll实现下拉刷新和上滑加载效果

    7. **滚动事件监听**:iScroll 会自动处理用户的滚动行为,但你可以通过监听`scrollEnd`事件来触发其他操作,比如判断是否到达底部以触发上滑加载。 总的来说,基于iScroll实现下拉刷新和上滑加载效果,涉及到前端...

Global site tag (gtag.js) - Google Analytics