jquery事件监听滚动条 js监听div滚动事件

JQuery监听页面滚动事件及scrollTop(),offset().top总结

jquery获取滚动条高度使用.scrollTop()方法。首先我们新建一个长篇的HTML文档。然后我们编辑JS脚本，使用.scroll()方法，监听网页滚动。然后我们使用.scrollTop()获取垂直滚动距离。

首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。

但你要知道，滚动到哪个特定位置，例如滚动到一个标题h3那显示这个div，那么可以用jquery算这个h3距离网页顶部的距离：$(h3).offset().top，这个值有了后，还要算滚动条的距离$(this).scrollTop()。

相关问答

Q1: jQuery是怎样监听到事件的?

(element).on(click，function(){ /*获取该元素*/ console.log($(this))；alert(click)；})；on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

如果使用默认的resize就无能为力了。怎么办呢，这里给大家推荐一个jquery的小插件，相当于是对默认的resize事件的增强版本，它可以监听几乎所有标签的大小改变来做相应的处理。

form元素是有默认提交表单的行为，如果通过submit处理的话，需要禁止浏览器的这个默认行为，传统的方式是调用事件对象 e.preventDefault() 来处理， jQuery中可以直接在函数中最后结尾return false即可。

问题分析：如存在多个li的情况下，只为其中一个或几个绑定事件，而其他的不受事件影响。方法有很多种，比较简单的办法就是为需要绑定事件的li标签添加class属性。

在可编辑的DIV里，加上blur事件，就是当失去焦点时，获取失去焦点的DIV的ID，然后保存到全局变量里，这样你在做添加图片时，可以直接读取这个全局变量来获取最后是哪个DIV失去了焦点。

Q2: jquery获取滚动条高度和位置

首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。然后在上方引入jQuery的脚本，编辑js脚本，使用bind方法绑定浏览器的scroll事件，监听网页滚动，之后用scrollTop()获取垂直滚动距离，最后弹出输出的值即可。

首先，打开html编辑器，新建html文件，例如：index.html，并引入jquery。

Jquery可以用height()，来获取DOM元素的高。

Q3: 为什么jQuery不能监听document.body的滚动事件呢?

事件绑定加载的比html早，也就是说jquery在绑定click事件的时候input还没有生成了，所以绑定失败。jquery 方法一般都放在 (function(){ //todo })；里面，这样就会先加载html，可以找到html元素后再绑定里面的事件。

利用scroll 事件来监听。当用户滚动指定的元素时，会发生 scroll 事件。scroll 事件适用于所有可滚动的元素和 window 对象（浏览器窗口）。scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。

可以声明一个变量，在触发事件的适合给变量复制，事件处理完后再赋另外值，滚动事件里面每次都去验证这个变量就可以 。

jquery 监听页面滚动使用的方法：.scroll()。新建一个HTML文档，定义body的高度。创建JS脚本，使用.scroll() 方法监听页面滚动。如果页面发生滚动，则执行函数，弹出一个hello。

Q4: 请教jquery的$window.scroll事件

scroll事件适用于window对象，但也可滚动iframe框架与CSS overflow属性设置为scroll的元素。

JQuery无法做到这么智能的同时监听多种事件，不过可以用参数控制法来模拟实现这个效果。

scrollTop属性始终为0，也有可能是因为浏览器设置了缩放比，浏览器缩放比小于100%，有可能会导致scrollTop属性始终为。

首先在jquery 中scroll 事件适用于所有可滚动的元素和 window 对象。当用户滚动指定的元素时，scroll 事件被触发，代码如下所示。运行该代码，滚动鼠标条，则下面的滚动次数会发生改变。

因为对于滚动条只能获取它的scrollTop，那么只能在这个上面想办法。在这里你就要建立一个等式，四个参数，滚动条的scrollTop，window的height，目标元素的offerset.top和它自身的height。

事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

关于jquery事件监听滚动条和js监听div滚动事件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。