如何判断滚动是否滚动到了底部?

首先要了解的知识 scrollHeight,clientHeight,scrollTop

scrollHeight

只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。


clientHeight

也是只读属性,没有定义CSS或者内联布局盒子的元素为0,它是元素内部的高度,包含内边距,不包括x轴的滚动条高度、边框、外边距;

同一种型号的手机上是不变的。

scrollTop

这个元素的顶部滚动距离(到视口(一般都是html)的顶部的距离)。

可以实现计算到底部的距离了

计算是否到达底部原生js

element.scrollHeight - element.scrollTop === element.clientHeight

jquery

element..scrollHeight - element.scrollTop() == element.height()

实现下拉刷新

用到的是html jq

var loadingState = {
        text:false,
        image:false,
        video:false
    }
    
var httpUrl2 = "https://api.apiopen.top/getJoke"
    var options1 = {
        page:1,
        count:10,
        type:"text"
    }
    var options2 = {
        page:1,
        count:10,
        type:"image"
    }
    var options3 = {
        page:1,
        count:10,
        type:"video"
    }
    
    //在window里获取不到options,就只能把options放在data对象里,就能用data['options' (index 1)]获取到了
    var data = {
        options1,options2,options3
    }

//请求语句所在
    loadingState.text = true;
    textRender(options1);

//监听要滑动容器的滚动事件
$('.content').scroll(function(e){
    var index = $(this).index();
    //获取滚动的距离
        var sTop =  $('.content').eq(index).scrollTop();
    //获取容器的高度
        var contentHeight = $('.content').eq(index).height();
    //获取滚动高度
        var scrollHeight = $('.content').eq(index)[0].scrollHeight;
       //根据所选的不同options加载不同的内容
        if(index==$(this).index()&&loadingState.text!=true)         {
         //判断是否已经滚动底
            if((sTop contentHeight)==scrollHeight){
                //当到达底部是加载选项为true,之后的操作
                loadingState.text = true;
                //内容缓慢淡出
                $(this).animate({
                    scrollTop:sTop 80
                },1000)
                var options = data['options' (index 1)];
                //页数加一
                options.page  = 1;
                //加载新获取的内容
                textRender(options);
            }
        }           
}

//加载实现函数
funtion textRender(obj){
    //要添加的内容
    if(obj == options1){
            console.log(obj);
            $.get(httpUrl2,obj).then(function(res){            
                res.result.forEach(function(item,i){
                    var html = `
                        <div class="mui-card">
                            <div class="mui-card-header mui-card-media">
                                <img src="${item.header}">
                                <div class="mui-media-body">
                                    ${item.name}
                                    <p>发表于 ${item.passtime}</p>
                                </div>
                                
                            </div>
                            <div class="mui-card-content">
                                <div class="mui-card-content-inner">
                                    <p>${item.text}</p>
                                </div>
                            </div>
                            <div class="mui-card-footer">
                                <a class="mui-card-link">喜欢</a>
                                <a class="mui-card-link">评论</a>
                            </div>
                        </div>
                    `
                    $('.content:eq(0)').append(html).css('backgroundImage',"none")
                    loadingState.text = false;
                    $('.loading.text').stop(true).slideUp(2000,function(){
                        $('.loading.text').remove()
                    })
                })
            })
        }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持Devmax。

移动端html5判断是否滚动到底部并且下拉加载的更多相关文章

  1. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  3. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  4. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

  5. HTML5实现直播间评论滚动效果的代码

    这篇文章主要介绍了HTML5实现直播间评论滚动效果的代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 使用Html5多媒体实现微信语音功能

    这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下

  7. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  8. html5 拖拽及用 js 实现拖拽功能的示例代码

    这篇文章主要介绍了html5 拖拽及用 js 实现拖拽,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  9. HTML5自定义视频播放器源码

    这篇文章主要介绍了HTML5自定义视频播放器源码,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  10. HTML5新增form控件和表单属性实例代码详解

    这篇文章主要介绍了HTML5新增form控件和表单属性实例代码详解,需要的朋友可以参考下

随机推荐

  1. 微信小程序canvas实现水平、垂直居中效果

    这篇文章主要介绍了小程序中canvas实现水平、垂直居中效果,本文图文实例代码相结合给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下

  2. 使用HTML5做的导航条详细步骤

    这篇文章主要介绍了用HTML5做的导航条详细步骤,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. H5最强接口之canvas实现动态图形功能

    这篇文章主要介绍了H5最强接口之canvas实现动态图形功能,需要的朋友可以参考下

  4. Canvas高级路径操作之拖拽对象的实现

    这篇文章主要介绍了Canvas高级路径操作之拖拽对象的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  5. html5视频自动横过来自适应页面且点击播放功能的实现

    这篇文章主要介绍了h5视频自动横过来自适应页面且点击播放,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. 详解HTML5中的picture元素响应式处理图片

    这篇文章主要介绍了详解HTML5中的picture元素响应式处理图片,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  7. canvas像素点操作之视频绿幕抠图

    这篇文章主要介绍了canvas像素点操作之视频绿幕抠图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  8. html5利用canvas实现颜色容差抠图功能

    这篇文章主要介绍了html5利用canvas实现颜色容差抠图功能,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

  9. canvas绘制视频封面的方法

    这篇文章主要介绍了canvas绘制视频封面的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5拖拽功能实现的拼图游戏

    本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧

返回
顶部