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

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

原生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.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

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

js实现返回顶部效果的方法总结

当页面特别长的时候,用户想回到页面顶部,必须得滚动好几次滚动键才能回到顶部,如果在页面右下角有个返回顶部的按钮,用户点击一下,就可以回到顶部,对于用户来说,是一个比较好的体验。

使用CSS实现无滚动条滚动

我们都知道,撸页面的时候当我们的内容超出了我们的div,往往会出现滚动条,影响美观。百度下大部分都是在说overflow:hidden或者overflow-y: no可以解决问题,但是并不能很好的解决我们的问题,那么怎么办呢?

css、js实现自定义滚动条的两种方式

一般默认的滚动条会比较丑,我们可以利用css或者js来实现实现自定义滚动条的功能; 下面就整理2种实现方式

基于iScroll实现内容滚动

iScroll 是一款针对web app使用的滚动控件,它可以模拟原生IOS应用里的滚动列表操作,还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。

如何用js制作滚动文字?

有时候需要展示的文字较多,但是空间较少,为了能充分的利用空间,可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

js如何实现滚动到一定位置将内容固定在页面顶部

window.onscroll为滚轮监听,document.body.scrollTop||document.documentElement.scrollTop 写两个是为了兼容不同浏览器。固定位置的top要设为负值,原因不明,若为0则会跟上方有空隙。左右位置虽然是0也要设,不然若为不是100%宽度的内容会出现左右跳动。

jquery扩展方法:实现模拟Marquee无限循环滚动

在一些网站的公告栏有这样的一个效果,如果有多条公告就会出现上下滚动效果【也叫做跑马灯效果】,这是如何实现的呢?下面通过基于jquery的扩展

H5中滚动到底部的事件

在H5中,我们有这样的需求:例如有列表的时候,滚动到底部时,需要加载更多。可以采用window的滚动事件进行处理,如果滚动是针对整个屏幕而言的(不针对于某个界面小块),那么这个应该是是成立的

css修改浏览器默认滚动条样式

写过挺多项目都需要改变滚动条的默认样式 并不想单独下载和引入插件 因此纯css修改默认滚动条的样式 这次算统一整理下方法,直接上代码。这个的优点在于 鼠标移上才会显示修改的滚动条 体验很好

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

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

点击更多...

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