关闭

原生js判断加载更多事件,通过获取页面滚动距离、文档总高度、浏览器视口高度

时间: 2017-11-28阅读: 2791标签: 滚动

原生js获取滚动条在Y轴上的滚动距离

function getScrollTop() {  
    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;  
    return scrollTop;
}


原生js获取文档的总高度

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;  
    return scrollHeight;
}


原生js获取浏览器视口的高度

function getWindowHeight() {  
    var windowHeight = 0;  
    if (document.compatMode == "css1Compat") {    
        windowHeight = document.documentElement.clientHeight;  
    } else {    
        windowHeight = document.body.clientHeight;  
    }  
    return windowHeight;
}


页面滚动至视口高度+页面Y轴滚动距离大于文档总高度 - 20px时触发ajax事件  

window.onscroll = function() {  
    if (getScrollTop() + getWindowHeight() >= getScrollHeight() - 20) { 
    //ajax获取数据
 } };


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/188

关闭

js中scroll滚动

scroll,滚动,一般讨论的是网页整体与浏览器之间的关系。这四个属性,全部是只读属性,其中,无非就是分为宽高和左上。两个方向。

前端高性能滚动 scroll 及页面渲染优化

主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动。因为本文涉及了很多很多基础,是我自己学习记录的一个过程,如果上面列出的知识点都了然于胸了,就可以不必往下看了

background-attachement视差滚动

之前项目中没有涉及到视觉滚动的网站,但是毕竟是一种常用的网站类别,不得不了解。实现方法很简单,做一下简单的分析。滚动视差是指多层背景以不同的速度移动,形成立体的运动效果,来带非常出色的视觉体验。

移动端滚动穿透问题解决方案

移动端有可滚动的弹窗肯定会遇到的问题,滑动弹层背景跟着滚动,如果弹窗里面的内容不需要滚动的可以直接粗暴的把滚动事件禁用掉,但是如果弹窗内容过多需要滚动那就不可以这样做。以下这个解决办法在线上使用没有问题,可以大胆拿去用

CSS 实现隐藏滚动条同时又可以滚动

移动端页面为了更接近原生的体验,是否可以隐藏滚动条,同时又保证页面可以滚动?使用 overflow:hidden 隐藏滚动条,但存在的问题是:页面或元素失去了滚动的特性。于是想到了自定义滚动条的伪对象选择器::-webkit-scrollbar。

js将滚动条scrollbar保持在最顶/底部

在某些场景中,我们通常会遇到需要将滚动条保持在顶/底部,比如:在线客服聊天对话中,始终让聊天对话框保持在最底部使得能一直看到最新的聊天记录

js禁止页面滚动

发移动端页面的时候有一个很比较常见的需求,在出现弹窗时,禁止滑动弹窗后面的主体页面。如何实现呢,往下看

原生JS实现图片滚动

黑色盒子是最终显示滚动图像的区域,绿色盒子为其子容器,其宽度要大于黑色外层盒子,这样才能通过设置黑色盒子的scrollLeft实现图像的滚动。最内层的蓝色盒子用于包裹所有滚动的图像

scrollBehavior 切换到新路由时,页面要滚动到顶部或保持原先的滚动位置

当创建一个 Router 实例,可以提供一个 scrollBehavior 方法:scrollBehavior 方法接收 to 和 from 路由对象。第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。

完美解决H5滚动滑动穿透方案:不使用系统滚动

网上有很多黑科技解决这个问题,都不是从根本去解决,例如通过js控制弹出时html加上position:fixed; 弹窗关闭后再去掉该样式,总觉得不太对,像是打补丁。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!