精华内容
下载资源
问答
  • 界面 ...1.判断滚动条是否在底部 //判断滚动条是否底部 $(".msgList").scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(this)[0].scrollHeight; ...

    界面

    <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判断滚动条是否底部

    千次阅读 2018-10-30 19:57:05
    &lt;!DOCTYPE html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="...js判断滚动条是否底部&lt;/title&gt; &lt;style&gt;  .b

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <title>js判断滚动条是否到底部</title>
    <style>
        .bottom{ 
            width: 500px; 
            height: 50px; 
            position: fixed; 
            left: 50%; 
            margin-left: -250px; 
            top: 50%; 
            background: #f00; 
            color: #fff; 
            line-height: 50px; 
            text-align: center; 
            border-radius: 5px; 
            display: none;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <script>
        var timer;
        $(window).bind('scroll',function(){
            clearTimeout(timer);
            timer = setTimeout(function(){
                if($(window).scrollTop()&

    展开全文
  • 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 判断滚动条是否到达底部

    千次阅读 2017-04-27 20:18:15
    1. 原生Javascript实现判断滚动条底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。 scrollTop : 滚动条Y轴上的滚动距离。 clientHeight : 内容可视区域的高度。 scrollHeight : ...

    1. 原生Javascript实现

    判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop、clientHeight、scrollHeight。
    scrollTop : 滚动条在Y轴上的滚动距离。
    clientHeight : 内容可视区域的高度。
    scrollHeight : 内容可视区域的高度加上溢出(滚动)的距离。
    从这个三个属性的介绍就可以看出来,滚动条到底部的条件即为scrollTop + clientHeight == scrollHeight。

    代码如下:

    //滚动条在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;
    }
    //给Window设置滚动事件
    window.onscroll = function(){
      if(getScrollTop() + getWindowHeight() == getScrollHeight()){
        alert("you are in the bottom!");
      }
    };

    2. Jquery实现

    用jquery实现的话会简单很多。

    代码如下:

    $(window).scroll(function(){
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      if(scrollTop + windowHeight == scrollHeight){
          //当滚动到底部时,执行此代码框中的代码
        alert("you are in the bottom");
      }
    });

    3. 附加

    如果要判断在某一个元素中的滚动条是否到底部,根据类似的思想,将document.body换成特定的元素即可,获取scrollTop和scrollHeight的方式是一样的,但是获取元素可见高度需要用到offsetHeight属性,直接依葫芦画瓢即可。

    展开全文
  • $(window).scrollTop() +$(window).height() ===$(document).height()成立时滚动条在底部
  • js实现的判断滚动条是否底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段滚动条,已经到底部了!的提示语,本段代码适应于所有网页...
  • 判断滚动条是否滚动到底部以及判断页面数据是否修改 IE+FE下测试通过
  • 任务:当浏览器的滚动条滚动到底部的时候,请求后台的数据 ...jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部 http://blog.csdn.net/zhangking/article/details/5722232...
  • 主要介绍了jquery 判断滚动条到达了底部和到达顶端的方法,需要的朋友可以参考下
  • jquery判断滚动条时候到达底部function isScrollBottom(callback) { $(window).scroll(function () { if(($(document).height()-100)&lt;=($(window).height()+$(window).scrollTop())){ callback() } }) }...
  • 判断滚动条是否到达底部事件

    千次阅读 2016-12-07 17:22:15
    clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。offsetHeight:是指元素内容的高度。依照上面的...
  • js实现的判断滚动条是否底部的特效源码是一段可以判定有没有浏览到网页最底部的效果代码,将网页拖动或利用鼠标滚轮滚动到最底部后,页面中就会提示一段“滚动条,已经到底部了!”的提示语,本段代码适应于所有...
  • clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容。而只是单纯的DIV的高度。 offsetHeight:是指元素内容的高度。依照上面...
  • 需要三个值:窗口高度、滚动条高度、文档高度 窗口高度 表示为内容可视区域的高度 outerWidth和outerHeightIE9、Safairi和Firefox中返回浏览器本身的尺寸。 Opera中,这两个属性表示页面视图容器的大小,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 16,062
精华内容 6,424
关键字:

判断滚动条是否在底部