精华内容
下载资源
问答
  • 判断滚动条是否在底部
    2019-03-12 17:42:57

    界面

    <div class="msgList">
    </div>

    1.判断滚动条是否在底部

    //判断滚动条是否到底部
    $(".msgList").scroll(function(){
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(this)[0].scrollHeight;
        var windowHeight = $(this).height();
        if(scrollTop + windowHeight == scrollHeight){
            alert("滚动到底部");
        }
    });

    2.控制滚动条滑动到底部

    //滚动条滚动到底部
    //$(".msgList").scrollTop($(".msgList")[0].scrollHeight);
    //添加滚动动画
    $(".msgList").animate({scrollTop:$(".msgList")[0].scrollHeight}, 800);

     

    更多相关内容
  • 本文实例讲述了js判断滚动条是否已到页面最底部或顶部的方法。分享给大家供大家参考。具体分析如下: 我们经常会看到很多的网站一个返回顶部效果就是当我们滚动条到指定位置时返回顶部出来了,否则就自动隐藏了,...
  • 判断滚动条底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop为滚动条Y轴上的滚动距离。 clientHeight为内容可视区域的高度。 scrollHeight为内容可视区域的高度加上溢出...
  • jquery判断滚动条是否底部的方法:1、使用【scrollTop()】方法,jQuery检测浏览器window滚动条到达底部;2、使用【scroll_div】检测动条到达底部事件。 本教程操作环境:windows7系统、jquery3.2.1版本,该方法...

    jquery判断滚动条是否到底部的方法:1、使用【scrollTop()】方法,jQuery检测浏览器window滚动条到达底部;2、使用【scroll_div】检测动条到达底部事件。



    本教程操作环境:windows7系统、jquery3.2.1版本,该方法适用于所有品牌电脑。

    jquery判断滚动条是否到底部的方法:

    一、jQuery检测浏览器window滚动条到达底部

    jQuery获取位置和尺寸相关函数:

    $(document).height() 获取整个页面的高度

    $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小在你缩放浏览器窗口大小时会改变,与document是不一样的

    scrollTop() 获取匹配元素相对滚动条顶部的偏移。

    scrollLeft() 获取匹配元素相对滚动条左侧的偏移。

    scroll([[data],fn]) 当滚动条发生变化时触犯scroll事件

    jQuery检测滚动条到达底部代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    $(document).ready(function() {

      $(window).scroll(function() {

       

        if ($(document).scrollTop()<=0){

          alert("滚动条已经到达顶部为0");

        }

       

        if ($(document).scrollTop() >= $(document).height() - $(window).height()) {

          alert("滚动条已经到达底部为" + $(document).scrollTop());

        }

      });

    });

    二、jQuery检测div中滚动条到达底部

    上半篇介绍了jQuery检测浏览器window滚动条到达底部,其实还并不理解scrollTop和scrollHeight概念,通常滚动条都是放在div中的。

    如下检测id为scroll_div滚动条到达底部事件:

    1

    2

    3

    4

    5

    6

    7
     



          



            来自于www.php中文网.cn


            来自于www.php中文网.cn


            来自于www.php中文网.cn


          



        



    首先需要理解几个概念:

    scrollHeight:表示滚动条需要滚动的高度,即内部div,10000px

    scrollTop: 表示滚动条滚动的高度,可能大于外部div 500px

    也就是说scrollDiv的高度+scrollTop滚动的最大高度=scrollHeight

    于是检测div中div滚动条高度就简单了:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    $(document).ready(function() {

      $("#scroll_div").scroll(function(){

        var divHeight = $(this).height();

        var nScrollHeight = $(this)[0].scrollHeight;

        var nScrollTop = $(this)[0].scrollTop;

        $("#input1").val(nScrollHeight);

        $("#input2").val(nScrollTop);

        $("#input3").val(divHeight);

        if(nScrollTop + divHeight >= nScrollHeight) {

          alert("到达底部了");

        }

      });

    });

    如果是异步加载数据,数据没加载完,又触犯了同一页的数据加载请求,我通常是加一个flag

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    $(document).ready(function() {

      var flag = false;

      $("#scroll_div").scroll(function(){

          

        if(flag){

          //数据加载中

          return false;

        }

          

        var divHeight = $(this).height();

        var nScrollHeight = $(this)[0].scrollHeight;

        var nScrollTop = $(this)[0].scrollTop;

        $("#input1").val(nScrollHeight);

        $("#input2").val(nScrollTop);

        $("#input3").val(divHeight);

        if(nScrollTop + divHeight >= nScrollHeight) {

          //请求数据

          flag = true;

          alert("到达底部了");

        }

      });

    });

    相关免费学习推荐:javascript(视频)

    展开全文
  • 主要介绍了JS实现判断滚动条滚到页面底部并执行事件的方法,本文先是分析了需求以及必备知识,然后给出实现代码,需要的朋友可以参考下
  • 下面小编就为大家带来一篇一个用jquery写的判断div滚动条底部的方法【推荐】。小编觉得挺不错的,现在分享给大家,也给大家做个参考,一起跟随小编过来看看吧
  • 一、jQuery检测浏览器window滚动条到达底部 jQuery获取位置和尺寸相关函数: $(document).height() 获取整个页面的高度 $(window).height() 获取当前也就是浏览器所能看到的页面的那部分的高度。这个大小你缩放...
  • 本文章向码农介绍jquery如何判断滚动条滚到页面底部并执行事件。首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。 ...
  • 主要介绍了jQuery实现判断滚动条底部的相关资料,需要的朋友可以参考下
  • JS如何判断滚动条是否滚到底部

    千次阅读 2021-12-21 14:18:50
    JS如何判断滚动条是否滚到底部背景解决方案(以纵向滚动条为例,横向滚动条方法类似) 背景 通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如“加载更多”等。 那么如何通过js来判断滚动条是否滚到底部,...

    背景

    通常我们需要判断滚动条是否滚到底部,以实现相应的功能,如“加载更多”等。
    那么如何通过js来判断滚动条是否滚到底部,请看以下方法

    解决方案(以纵向滚动条为例,横向滚动条方法类似)

    判断滚动条到底部,需要用到DOM的三个属性值,即clientHeight、scrollTop、scrollHeight。(横向滚动条则是clientWidth,scrollLeft,scrollWidth)

    clientHeight为内容可视区域的高度。

    scrollTop为滚动条在Y轴上的滚动距离。

    scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。

    从这个三个属性的介绍就可以看出来,滚动条到底部的条件即:
    clientHeight + scrollTop === scrollHeight

    const dom = document.getElementById('scrollElement');
    dom.addEventListener('scroll', () => {
    	const clientHeight = dom.clientHeight;
    	const scrollTop = dom.scrollTop;
    	const scrollHeight = dom.scrollHeight;
    	if (clientHeight + scrollTop === scrollHeight) {
    		console.log('竖向滚动条已经滚动到底部')
    	}
    })
    
    展开全文
  • js实现的判断滚动条是否底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段滚动条,已经到底部了!的提示语,本段代码适应于所有网页...
  • 这个大小你缩放浏览器窗口大小时会改变,与document是不一样的要获取顶端,只需要获取到scrollTop()==0的时候就是顶端; 要获取底端,只要获取scrollTop()>=$(document).height()-$(window).height() 就可以知道...
  • 易语言判断滚动条是否在底端源码
  • 判断滚动条是否到达底部事件

    千次阅读 2016-12-07 17:22:15
    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight:是指元素内容的高度。依照上面的...

    首先理解三个dom元素,分别是:clientHeight、offsetHeight、scrollTop。

    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。

    offsetHeight:是指元素内容的高度。依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分。

    scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度。

    举例,如果一个DIV高度是400px(即clientHeight为400),而里面的内容是一个很长的列表,内容的高度是1000px(即offsetHeight为1000)。那么,可见部分我们看到400px,1000px的内容中还有600px不可见。而这不可见的部分呢,正是我们通过拉动滚动条才能把这一部分显示出来。你如果滚动条不拉动,此时scrollTop为0,如果你把滚动条拉到底,显示出列表最下面的部分,此时,scrollTop为600。 所以scrollTop的取值区间为[0, 600]。 所以这个600可以理解为滚动条可以滚动的长度。

    理解完上面的这个概念之后。要判断是否滚动到底部就很好做了。

    首先,我们拉动滚动条,从最上面拉到最下面,变化的是scrollTop的值,而这个值是有一个区间的。

    这个区间是:[0, (offsetHeight - clientHeight)]

    即,滚动条拉动的整个过程的变化在 0 到 (offsetHeight – clientHeight) 范围之内。

    1、判断滚动条滚动到最底端:scrollTop == (offsetHeight – clientHeight)

    2、在滚动条距离底端50px以内:(offsetHeight – clientHeight) – scrollTop <= 50

    3、在滚动条距离底端5%以内:scrollTop / (offsetHeight – clientHeight) >= 0.95

    如上。

    如果要实现拉到底部自动加载内容。只要注册个滚动条事件:

    scrollBottomTest =function(){  
         $("#contain").scroll(function(){  
             var $this =$(this),  
             viewH =$(this).height(),//可见高度  
             contentH =$(this).get(0).scrollHeight,//内容高度  
             scrollTop =$(this).scrollTop();//滚动高度  
            //if(contentH - viewH - scrollTop <= 100) { //到达底部100px时,加载新内容  
            if(scrollTop/(contentH -viewH)>=0.95){ //到达底部100px时,加载新内容  
            // 这里加载数据..  
            }  
         });  
    }  
    展开全文
  • js实现的判断滚动条是否底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段“滚动条,已经到底部了!”的提示语,本段代码适应于所有...
  • 实例如下所示: $[removed](scroll, function () { //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //视窗的高度 var viewportHeight = window....
  • 如何判断滚动是否滚动到了底部? 首先要了解的知识 scrollHeight,clientHeight,scrollTop scrollHeight 只读属性,高度包括所有内容,包含内边距,但不把水平滚动条、边框和外边距算在内。 clientHeight 也是只读...
  • vue中如何判断滚动条到达底部

    千次阅读 2021-11-23 14:27:05
    console.log(this.$refs.veriface,'智能切分滚动组件实例')//具有滚动条的dom元素, this.$refs.veriface.addEventListener('scroll', (e)=>{ // console.log(e,'滚动条滚动触发') var scrollTop = e.target....
  • 关键是计算滚动条是否滚动到了浏览器底部,算法如下 滚动条卷起来的高度 + 窗口高度 > 文档的总高度 + 50/*我这里将滚动响应区域高度取50px*/;如果这个判断为true则表示滚动条滚动到了底部。 实例 <style type...
  • "滚动条已经到达底部为" + $(document).scrollTop()); } }); }); 复制代码 HTML精确定位属性:scrollLeft,scrollWidth,clientWidth,offsetWidth scrollHeight: 获取对象的滚动高度。 scrollLeft:设置或获取位于...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 17,866
精华内容 7,146
热门标签
关键字:

判断滚动条是否在底部