应无所住,而生其心
排名
1
文章
860
粉丝
112
评论
163
net core webapi post传递参数
庸人 : 确实坑哈,我也是下班好了好几次,发现后台传递对象是可以的,但...
百度编辑器自定义模板
庸人 : 我建议换个编辑器,因为现在百度富文本已经停止维护了,用tinymec...
ICP备案 :渝ICP备18016597号-1
网站信息:2018-2025TNBLOG.NET
技术交流:群号656732739
联系我们:contact@tnblog.net
公网安备:50010702506256
欢迎加群交流技术

Jquery判断滚动条是否到底部

7199人阅读 2018/12/16 21:35 总访问:5182032 评论:0 收藏:0 手机
分类: Js相关


有时间我们需要判断滚动条是否已经滚动到底部,例如我们要做滚动刷新的功能



$(window).height():一个屏幕的高度

注意这个方法有可能位置到还是所有的高度,可以使用下面这个两个方法

  1. var innerHeight =  window.innerHeight;
  2. var clientHeight = document.body.clientHeight;


$(this).scrollTop():滚动条距离顶部的位置

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


  1.     
  2.     $(window).scroll(function ({
  3.             var scrollTop = $(this).scrollTop();
  4.             var scrollHeight = $(document).height();
  5.             //var windowHeight = $(window).height();
  6.             var windowHeight = document.body.clientHeight;
  7.             console.log("垂直滚动条位置:" + scrollTop + "--" + scrollHeight);
  8.             console.log("scrollTop + windowHeight :" + windowHeight);
  9.             if (scrollTop + windowHeight >= scrollHeight) {
  10.                 alert("已经到最底部了!");
  11.             }
  12.         });



上面说的是整个页面的判断,如果判断某个板块,逻辑是一样的
代码如下:

  1. //获取某个板块的高度
  2. let tagHeight = $(".CodeMirror-vscrollbar").height();
  3. //获取这个板块目前滚动条滚动的位置
  4. let tagScrollTop = $(".CodeMirror-vscrollbar").scrollTop();
  5. //获取这个板块的滚动条总高度
  6. let tagScrollHeight = $(".CodeMirror-vscrollbar")[0].scrollHeight;
  7. //alert(tagHeight);
  8. //alert(scrollTop);
  9. //alert(tagHeight + tagScrollTop);
  10. //alert(tagScrollHeight);
  11. //当这个板块的高度加上目前滚动条滚动的位置等于滚动条的总高度就说明已经滚动到低了
  12. if (tagHeight + tagScrollTop >= tagScrollHeight)
  13. {
  14.     alert("滚动条已经到底部了");
  15. }



哈哈图片请忽略




欢迎加群讨论技术,1群:677373950(满了,可以加,但通过不了),2群:656732739。有需要软件开发,或者学习软件技术的朋友可以和我联系~(Q:815170684)

评价

Jquery右击自定义显示菜单+自定义换肤

结合右击显示菜单来做的效果图:代码:<!doctypehtml> <html> <head> <metacharset="gbk&quo...

可输入下拉文本框,据输入,动态加载数据 Jquery-editable-select

用到一个jquery-editable-select的控件github地址:https://github.com/indrimuska/jquery-editable-select这个插件的原理是...

Jquery if 判断会判断字段的那些情况

Jquery if 判断会对对象的判断1:判断是否未null2: 判断是否未空3: 判断是否未0当我们写if 判断的时候可以不用书写为var ...

Jquery常用选择器

html<divid='content'> <div>aa</div> <div>bb</div> <div>cc</div&gt...

Jquery删除表格的行Id自适应

jquery删除表格的行,Id自适应,删除后让id不断层还是依次排列//删除(id自适应) $(".usertable").on("click&...

思宇上课笔记—初识Jquery

JQuery(前端)什么是jQuery?jQuery就只是一个一个JavaScript函数库而已什么是js的库就是封装的一些js常用的的方法。eg:Dom...

Jquery选择器的简单实现

一、原生JS提供给我们的选择器document.getElementById(); document.getElementsByTagName(); ...这是以前常用的,但是实...

思宇上课笔记—Jquery插件的编写

jQuery课堂实例相信我们每个人在学习jQuery中,都或多或少的使用到了jQuery插件,jQuery插件使用起来确实非常的方便,快捷...

Jquery—为动态添加的元素绑定事件

我们在使用jQuery的时候总会遇到形形色色的问题在jQuery的元素绑定事件中,我通常使用click来绑定单击事件,但是这个只能绑...

js、Jquery获取文本的宽高

页面编写:<!DOCTYPEhtml> <html> <head> <metacharset="UTF-8"/> <title>jQ...

Jquery验证插件formValidator,AJAX验证手动传值

AJAX验证默认会传递你绑定的id的name值回去,如何你想传递其他值回去的话,直接这样写是不行的应该要这样使用,通过一个方...

使用Jquery操作元素的css样式(获取、修改等等)

使用jquery操作元素的css样式(获取、修改等等) //1、获取和设置样式 $("#tow").attr("class")...

Jquery Validate 验证插件 基本使用

插件引用地址:<scriptsrc="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min...

Jquery分页条

jQuery分页条下载地址:https://www.jb51.net/jiaoben/589208.html1、在前台HTML页引入js以及css文件<scriptsrc="~...

Jquery选择器结束

类选择器:$(“.类名”)Id选择器:$(“#id名”)属性选择器:$(“[属性名=’属性值’]”)元素选择器:$(“元素”) 比如$(“div...