当前位置: 移动技术网 > IT编程>网页制作>CSS > HTML页面实现鼠标无限滚动下拉教程

HTML页面实现鼠标无限滚动下拉教程

2018年11月01日  | 移动技术网IT编程  | 我要评论

    html页面实现鼠标无限滚动下拉

    做一个日志在线查看的功能,需要无限下拉的功能。
    前提条件:页面必须有滚动条
    贴一下代码。
    前台页面:

    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;
    }
     
    //文档的总高度
     
    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;
    }
     
    //浏览器视口的高度
     
    function getwindowheight(){
    	var windowheight = 0;
    	if(document.compatmode == "css1compat"){
    		windowheight = document.documentelement.clientheight;
    	}else{
    		windowheight = document.body.clientheight;
    	}
    	return windowheight;
    }
    
    //js原生监听 滚动事件的---因为项目框架和jquery不兼容
    window.onscroll = function() {
        if(getscrolltop() + getwindowheight() == getscrollheight()){
        	//这里调用你查询数据和加载数据的代码
    	}
    }

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网