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

首先要了解的知识 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()                    })                })            })        }}

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