判断div滑动到底部的scroll实例代码

实例如下所示：

<!DOCTYPE html>
<html>
<head>
  <title>判断div滑到底部的代码</title>
  <script type="text/javascript" src="jquery-3.1.0.min.js"></script>
  <style type="text/css">
    #scrollTest{
      width:100px;
      height:100px;
      overflow-y: auto;//当div中y方向的内容溢出时，y轴分别显示滚动条
      border:1px solid red;
    }
  </style>
</head>
<body>
  <div id="scrollTest">
    <table>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
      <tr>
        <td>111</td>
        <td>222</td>
      </tr>
    </table>
  </div>
</body>
</html>
<!--//事先得引入jQuery文件-->
<script type="text/javascript">
  $("#scrollTest").scroll(function(){
    var h = $(this).height();//div可视区域的高度
    var sh = $(this)[0].scrollHeight;//滚动的高度，$(this)指代jQuery对象，而$(this)[0]指代的是dom节点
    var st =$(this)[0].scrollTop;//滚动条的高度，即滚动条的当前位置到div顶部的距离
    if(h+st>=sh){
    //上面的代码是判断滚动条滑到底部的代码
      //alert("滑到底部了");
      $("#scrollTest").append(111+"<br>");//滚动条滑到底部时，只要继续滚动滚动条，就会触发这条代码.一直滑动滚动条，就一直执行这条代码。
    }
  })
</script>

以上这篇判断div滑动到底部的scroll实例代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • jQuery实现将div中滚动条滚动到指定位置的方法

    本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法.分享给大家供大家参考,具体如下: 一.Js代码: onload = function () { //初始化 scrollToLocation(); }; function scrollToLocation() { var mainContainer = $('#thisMainPanel'), scrollToContainer = mainContainer.find('.son-panel:last');//滚动到<div

  • JS实现判断滚动条滚到页面底部并执行事件的方法

    需要了解三个dom元素,分别是:clientHeight.offsetHeight.scrollTop. clientHeight:这个元素的高度,占用整个空间的高度,所以,如果一个div有滚动条,那个这个高度则是不包括滚动条没显示出来的下面部分的内容.而只是单纯的DIV的高度. offsetHeight:是指元素内容的高度.依照上面的,那这个高度呢就是DIV内部的高度,包括可见部分及以滚动条下面的不可见部分. scrollTop:这个是什么呢?他可以理解为滚动条可以滚动的长度. 举例,如果一个

  • 让DIV的滚动条自动滚动到最底部的3种方法(推荐)

    要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. 但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页 面的滚动条.这个方法我是用不了了,因为

  • 实现div滚动条默认最底部以及默认最右边的示例代码

    有个需求,要在显示聊天框时,固定框的大小为300px高度,宽度50px左右,然后当聊天内容超出宽度或者高度时会出现滚动条,并且垂直滚动条要默认最底部,以便显示最新消息,水平滚动条一般都是默认最左,这里列出默认最底部以及默认最右边的方法的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>实现div滚动条默认最底部以及默认最右边</title&

  • Javascript实现DIV滚动自动滚动到底部的代码

    查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果. 关键的部分部分在这里:div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码: 复制代码 代码如下: <html> <body> <div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> <table style

  • 实现div内部滚动条滚动到底部和顶部的代码

    实例如下所示: <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .scrolldiv{ width: 500px; height: 400px; margin: 10px auto; background: #f00; overflow-y: scroll; padding: 10px; } </style> &

  • 用js控件div的滚动条,让它在内容更新时自动滚到底部的实现方法

    如下所示: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> </head> <body> <script type="text/javascript"> funct

  • 判断div滑动到底部的scroll实例代码

    实例如下所示: <!DOCTYPE html> <html> <head> <title>判断div滑到底部的代码</title> <script type="text/javascript" src="jquery-3.1.0.min.js"></script> <style type="text/css"> #scrollTest{ width:1

  • 微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码

    具体代码如下所示: // 1.scroll-y="true" Y轴滚动 // 2.应该是设置了高才能行 // 3.使用scroll-top属性实现滚动到底部,scroll-top不要带单位 <scroll-view scroll-y="true" style="height:{{height-50}}px;" scroll-top="{{scrollTop}}"> <block wx:for="{{

  • 一个用jquery写的判断div滚动条到底部的方法【推荐】

    一个用jquery写的判断div滚动条到底部的方法【推荐】

    jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop.scrollLeft.scrollHeight.其中 scrollHeight 属性,互联网上几乎搜素不到关于它的应用技巧,而我正好需要用到它. 我们现在只探讨和垂直滚动有关的 scrollTop.scrollHeight 属性. 一.滚动条有关属性的正确理解: 假设有以下Html代码: <div id="div1" style="overflow-y:auto; ove

  • 判断滚动条滑到底部触发事件(实例讲解)

    实例如下所示: $(document).on("scroll", function () { //真实内容的高度 var pageHeight = Math.max(document.body.scrollHeight, document.body.offsetHeight); //视窗的高度 var viewportHeight = window.innerHeight || document.documentElement.clientHeight || document.body

  • jquery手机触屏滑动拼音字母城市选择器的实例代码

    今天用到城市选择,直接用拼音滑动方式来选择,用的时候引入jquery(个别样式需要自己修改) <div class="yp_indz"><img src="images/dizhi.png" alt=""><em>北京</em></div> <!--省份列表--> <div class="dzhc_xs"> <nav> <di

  • 使用jQuery实现两个div中按钮互换位置的实例代码

    使用jQuery实现两个div中按钮互换位置的实例代码

    效果如下 代码如下: <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-2.1.0.js"></script> <script type="text/javascript"> $(function() { /

  • Android程序开发之Fragment实现底部导航栏实例代码

    Android程序开发之Fragment实现底部导航栏实例代码

    流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 IDE:AS,Android studio; 模拟器:genymotion; 实现的效果,见下图. 具体实现 为了讲明白这个实现过程,我们贴出来的代码多一写,这样更方便理解 [最后还会放出完整的代码实现] .看上图的界面做的比较粗糙,但实现过程的骨架都具有了,想要更完美的设计,之后自行完善吧 ^0^. 布局 通过观察上述效果图,发现任意一个选项页面都有三部分组成: 顶部去除ActionBar后的标题栏: 中间一个Fragment

  • JavaScrpt判断一个数是否是质数的实例代码

    废话不多说了,直接给大家贴代码了 <script> //1.非正则实现 function isPrime(num) { // 不是数字或者数字小于2 if(typeof num !== "number" || !Number.isInteger(num)) { // Number.isInterget 判断是否为整数 return false } //2是质数 if(num == 2) { return true } else if(num % 2 == 0) { //排除

  • Python 判断文件或目录是否存在的实例代码

    使用 os 模块 判断文件是否存在 os.path.isfile(path) 判断目录是否存在 os.path.isdir(path) 判断路径是否存在 # 使用 path 模块 os.path.exists(path) # 使用 access() 方法 os.access(path, os.F_OK) 使用 open 函数和异常捕获 如果直接用 open() 函数打开一个不存在的文件时,程序会抛出异常,我们可以通过 try 语句来捕获异常以达到判断文件是否存在的目的. 如果文件不存在,open

  • oracle 函数判断字符串是否包含图片格式的实例代码

    首先是写一个分割字符串的函数,返回table类型 CREATE OR REPLACE FUNCTION fn_split (p_str IN VARCHAR2, p_delimiter IN VARCHAR2) RETURN ty_str_split IS j INT := 0; i INT := 1; len INT := 0; len1 INT := 0; str VARCHAR2 (4000); str_split ty_str_split := ty_str_split (); BEGI

随机推荐