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

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

原生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获取数据
 } };


无间歇文字滚动_ 原生js实现新闻无间歇性上下滚动

这篇文章主要介绍使用js实现文字无间歇性上下滚动,一些网站的公告,新闻列表使用的比较多,感兴趣的小伙伴们可以参考一下

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

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

js+css 实现 滚动条滑动时显示,不滑动时隐藏

把原有的滚动条隐藏,创建个新的滚动条,并拓展其宽度,达到隐藏的效果,而判断滚动条是否滚动,保存原有的滚动条到顶部的距离,看是否发生改变,做出相应的判断。

基于iScroll实现内容滚动

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

怎么给tbody加滚动条?通过css样式给表格tbody加垂直滚动条

tbody加滚动条实现思路:1,把tbody设置成display:block,然后就对其高度设置一个固定值,overflow设置成auto。2,把thead的tr设置成display:block。3,因为都设置成block所以要给td手动添加宽度。4,考虑到 tbody 产生了滚动条,这设置::-webkit-scrollbar进行解决。

基于webkit内容隐藏滚动条的方法总汇

基于webkit内容隐藏滚动条,核心代码是:overflow的值需要设置为auto或者scroll,然后设置::-webkit-scrollbar的display属性为none。当然也可以通过设置滚动条的宽度为0。

BetterScroll移动端滚动场景的应用

BetterScroll 是一款重点解决移动端各种滚动场景需求的开源插件,有下列功能支持滚动列表,下拉刷新,上拉刷新,轮播图,slider等功能。better-scroll通过使用惯性滚动、边界回弹、滚动条淡入淡出来确保滚动的流畅。