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

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

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

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

CSS:scroll-snap滚动事件停止及元素位置检测

CSS Scroll Snap是个非常好用的特性,可以让网页容器滚动停止的时候,无需任何JS代码的参与,浏览器可以自动平滑定位到指定元素的指定位置。类似幻灯片广告效果就可以纯CSS实现

基于iScroll实现内容滚动

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

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

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

BetterScroll移动端滚动场景的应用

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

DOM盒模型和位置 client offset scroll 和滚动的关系

在dom里面有几个描述盒子位置信息的值,pading border margin,width height,client;盒模型生产环境一般使用 box-sizing: border-box,效果:width == content.width + pading + border

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

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

关于滚动贯穿的解决方案

当前容器已经滚动到底部或者顶部,无法再滚动,容器会默认选择上层容器进行滚动,可以说滚动贯穿并非是一个bug,只是一种现象

css虚线边框滚动效果

常常看到一种酷炫的效果,鼠标hover一片区域后,区域显示出虚线边框,并且还有线条动画,那么这种效果具体是怎么实现的呢,本文提供了几种思路仅供参考。

vue 无限滚动问题

如今web开发中,无限加载是必需的一项功能,尤其是在移动端开发中,一个列表往往默认只加载10条,想看更多只能逐渐往下翻页。那么今天就看看如何在Vue-Cli中实现这个功能

background-attachement视差滚动

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

点击更多...

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