html页⾯滚动条监听事件,jquery如何监听滚动条事件?
jquery如何监听滚动条事件?下⾯本篇⽂章给⼤家介绍⼀下。有⼀定的参考价值,有需要的朋友可以参考⼀下,希望对⼤家有所帮助。
问题:
在浏览很多⽹页中都会发现,当滚动条滚动到⼀定的位置的时候就出显⽰⼀个返回到顶部的⼩图标,那如何监听判断滚动条滚动到指定的位置后触发某个事件呢?
⽅法:
可以通过使⽤$(window).scroll()进⾏滚动条的监听
当⽤户滚动指定的元素时,会发⽣ scroll 事件。
scroll 事件适⽤于所有可滚动的元素和 window 对象(浏览器窗⼝)。
scroll() ⽅法触发 scroll 事件,或规定当发⽣ scroll 事件时运⾏的函数。
代码:$(window).scroll(function(){
//获取滚动条滚动的位置
var top = $(window).scrollTop();
if(top > 100){
alert("滚动条滚动⼤于100显⽰弹出框")
}
})
html如何设置图片滚动
具体介绍:
1、打开html开发⼯具,新建⼀个html代码页⾯,在html代码页⾯输⼊⼤量的⽂本内容,确保在浏览器上能有滚动条出现
2、引⼊⼀个jquery.js库。在title标签后⾯创建⼀个script标签,然后引⼊jquery.js⽂件
3、新建⼀个script标签,在这个标签⾥⾯创建使⽤$(window).scroll()监听滚动条滚动事件(案例中判断当滚动条滚动⾼度超过100的时候就出现⼀个弹出框)
代码:$(function(){
$(window).scroll(function(){
var top = $(window).scrollTop();
if(top > 100){
alert("滚动条滚动⼤于100显⽰弹出框")
}
})
})
4、保存html代码后使⽤浏览器打开,然后滚动Y轴滚动条,发现滚动到⼀定位置后会出现⼀个alert弹出框表⽰监听滚动条成功
更多web前端开发知识,请查阅 HTML中⽂⽹ !!

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。