判断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实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
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内部滚动条滚动到底部和顶部的代码
实例如下所示: <!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> &
-
实现div滚动条默认最底部以及默认最右边的示例代码
有个需求,要在显示聊天框时,固定框的大小为300px高度,宽度50px左右,然后当聊天内容超出宽度或者高度时会出现滚动条,并且垂直滚动条要默认最底部,以便显示最新消息,水平滚动条一般都是默认最左,这里列出默认最底部以及默认最右边的方法的代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>实现div滚动条默认最底部以及默认最右边</title&
-
用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
-
Javascript实现DIV滚动自动滚动到底部的代码
查询了一下相关的资料,Div没有自动滚动的属性,只能模拟鼠标的滚动来现实想要的效果. 关键的部分部分在这里:div.scrollTop = div.scrollHeight; 下面是具体实现的精简代码: 复制代码 代码如下: <html> <body> <div id="divDetail" style="overFlow-y:scroll; width:250px;height: 200px;"> <table style
-
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. 但同样的代码拿到我这里却完全失效,又仔细查了下资料说XHTML标准下scrollTop的值恒为0,解决办法是使用 document.documentElement.scrollTop代替document.body.scrollTop,讲了半天所解决的是整个页 面的滚动条.这个方法我是用不了了,因为
-
判断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 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是: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中按钮互换位置的实例代码
效果如下 代码如下: <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实现底部导航栏实例代码
流行的应用的导航一般分为两种,一种是底部导航,一种是侧边栏. 说明 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
随机推荐
- js右下角与漂浮广告代码(兼容多浏览器)
- c语言指针之二级指针示例
- 使用JavaScript实现网页版Pongo设计思路及源代码分享
- PHP和XSS跨站攻击的防范
- PHP使用array_fill定义多维数组的方法
- 正则表达式在线测试工具
- mysql双向加密解密方式用法详解
- IE8/IE9下Ajax缓存问题
- 对于Python异常处理慎用“except:pass”建议
- jQuery lazyload 的重复加载错误以及修复方法
- jQuery基于ajax()使用serialize()提交form数据的方法
- JQuery获取与设置HTML元素的内容或文本的实现代码
- NodeJS远程代码执行
- C++ 字符串的反转五种方法实例
- java中关于移位运算符的demo与总结(推荐)
- Android开发自学笔记(六):声明权限和Activity
- Android组件ListView列表简单使用
- spring boot里增加表单验证hibernate-validator并在freemarker模板里显示错误信息(推荐)
- Java源码解析HashMap简介
- vue基于element的区间选择组件