当滚动条接触到DIV jQuery时触发函数 - 腾讯云开发者社区

文章/答案/技术大牛

发布

JQuery第三节

$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,...触发事件 $(selector).click(); //触发 click事件 $(selector).trigger("click"); 2.5. jQuery事件对象 jQuery事件对象其实就是js...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation()...多库共存 jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权. var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

1.1K3 0

学习jQuery这一篇就够了

# 3.4.5 表单事件 # 1. focus() 方法描述：当失去焦点时触发所绑定的函数。...', 'red'); }); # 2. blur() 方法描述：当获取焦点时触发所绑定的函数。...; }); $(':text').blur(function () { $(this).css('background', 'green'); }); # 3. change() 方法描述：当内容改变时触发所绑定的函数... $('select').change(function () { console.log($(this).val()); }); # 4. select() 方法描述：当内容选择时触发所绑定的函数...console.log($(this).val()); }); # 5. submit() 方法描述：当表单提交时触发所绑定的函数。

3.5K5 0

您找到你想要的搜索结果了吗？

是的

没有找到

JQ事件和事件对象

）/mouseleave()：鼠标移入“所选元素”才会触发，如果鼠标移入所选元素的后代时，不会触发（增加阻止事件冒泡功能） div class="div1"> <...二键盘事件 1 keydown 键盘按下时触发的事件 2 keyup 键盘松开一瞬间触发的事件 3 keypress 键盘按下松开整个过程触发的事件 //keydown（...）和keypress区别 keydown（）按下任意键都会触发，但keypress（）事件只在按下键盘中任意字符键（A-Z）时触发，功能键不会触发（如shift ctrl 等） 4 event.which...focusin可以在父元素上检测子元素获得焦点的情况而focusout可以在父元素上检测子元素失去焦点情况四其他事件 1 scroll（）滚动滚动条时触发的事件 2 resize...（）当调整窗口大小时触发的事件 //小案例（当滚动到一定高度出现搜索菜单） .bar{ width: 100%; height: 50px; background

5.3K2 0

H5C3第四节

scrollBar 是否包含滚动条，默认false，如果设置为true，那么浏览器自定的滚动条会出现，这个时候，页面滚动还是按页滚动，但是浏览器也能滚动。不建议开启，不然会不同步。...方法名描述 afterLoad(anchorLink, index) 滚动到某一个section,当滚动结束后，会触发一次这个回调函数，anchorLink是锚链接的名称，index从1开始计算 onLeave...(index,nextIndex,diretion) 当我们离开一个section时，会触发这个函数，index是离开的页面的序号，从1开始计算。...return false可以取消滚动 afterResize() 窗口大小发生改变后会触发的回调函数 afterSlideLoad(anchor,index, slideAnchor,slideIndex...) 页面滚动到某一个幻灯片的时候会触发这个回调函数 afterSlideLeave(anchor,index,slideIndex, diretion,nextSlideIndex) 当离开某一个幻灯片的时候会触发一次这个回调函数

6.8K3 0

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

其中以下的四个文件时必须要上传到服务器上： jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css...(){} }：当滚动到底部的时候调用这个自定义回调函数 Demo 同上 callbacks:{ onTotalScrollBack:function(){} }：当滚动到顶部的时候调用这个自定义回调函数...update 方法去实时更新滚动条当内容发生变化（例如通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等）下面是例子： $(".content...例如：$(selector).mCustomScrollbar("scrollTo",200,{ moveDragger:true }); callback：Boolean：执行回调函数当 scroll-to...div> div> div> div> 知道这些之后，我们就可以来定义滚动条样式了，对于同一页面多个滚动条

16.5K3 0

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

本节以较为直观的浏览器窗口事件为例来说明jQuery中窗口事件的使用。案例源代码： $(function() { $(document).scroll(function() { alert("触发了滚动条事件...> div> 网页预览效果如图5-22所示：图5-22页面效果在jQuery中的scroll事件是当滚轮出现时，用户使用鼠标滚轮滚动或者点击滚动条滚动才会发生的事件...当使用scroll滚动事件的时候，绑定事件的容器要有滚动条变化才会发生。...根据业务需要，有时候在没有滚动条情况下要触发鼠标滚动事件，如在页面中实现图片切换效果，就要回归使用JavaScript的方式将document绑定到mousewheel事件上。

1.1K1 0

前端之jQuery

3.6.4阻止后续事件执行使用场景：当一个标签绑定了多个事件而我们只希望指定的事件被触发时使用。...阻止冒泡事件的方法：在我们希望触发的标签的事件函数中加： e.stopPropagation; //问题的演示 div>div p ...（按钮标签）触发时就会出发父标签的事件。...由于回调函数是在当前DOM元素为上下文的语境中触发的，所以关键字 this 总是指向这个元素。...多用于插件开发者向 jQuery 中添加新函数时使用。 jQuery.extend({ min:function(a, b){return a < b ?

6.1K2 1

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

背景介绍日常浏览网页的时候，我们会发现一个问题，当页面太长、内容太多的时候我们很难快速浏览到心仪的内容。...当页面滚动到顶部、中间或底部位置时，对应的侧边按钮（即，顶部、中间或底部按钮）添加激活样式（即 **.active-color**），其余按钮样式变为默认（即 **.default-color**）。...div id="lift">：侧边栏容器，包含三个链接和分隔线。标签：三个链接，分别绑定了 toFunction 函数，点击时会调用该函数并传入不同的滚动高度参数。...点击链接：用户点击侧边栏上的链接，触发 onclick 事件，调用 toFunction 函数。 toFunction 函数将页面滚动到指定的高度。 3....页面滚动：当用户滚动页面时，触发 $(window).scroll 事件。获取当前页面的滚动高度，根据滚动高度所在的范围确定对应的索引。

1.5K0 0

浏览器中的几个高度

+ 滚动上去的高度 = 可滚动高度（文档高度）那么上拉加载的效果，用户进入网页：载入首批数据，文档高度（ $('html').height() == 2500px ）用户滚动滚当条...，当（监听滚动条的滚动状态） document.documentElement.scrollTop + document.documentElement.clientHeight + 500 > document.documentElement.scrollHeight...，及用户可滚动剩下500px高度的时候，开始下一次的数据加载当数据加载的时候，停止滚动条监听，滚动条的触发需要限制，比如触发后2s时间内不再触发。...反复如此，当数据加载完毕的时候，比对现有数据条数，与服务端返回的数据总数，如果相等，则加载完毕，那么清除滚动条监听那么一个简单的上拉加载数据页面就OK了~ div> jquery/2.0.0/jquery.min.js"> //

2.4K2 0

JS实现无限分页加载——原理图解

原理图实现无限分页的过程大致如下： 1 视窗滚动到底部 2 触发加载，添加到现有内容的后面。因此，可能会出现两种情况： 1 当页面的内容很少，没有出现滚动条。...2 当页面的内容很多，出现了滚动条。...id="sample"> div> div id="spinner"> 正在加载 div> <script type="text/javascript...checkScroll,1000); } checkScroll(); 代码的运行结果以及视窗高度验证最开始没有滚动滚动条时...当向下滚动了一下后，视窗的高度不变；上面隐藏的高度增加到100，即滚动条上面代表的部分。 ? 当触发加载后，视窗的高度保持变；上面隐藏的高度保持不变；文本的内容增加到1816； ?

7K10 0

JavaWeb（八）JQuery

对象，jquery 对象时jQuery 独有的，不能调用dom 对象里面的属性和方法，jQuery 对象是一个数组。...当文档完成加载时） $(selector).click(function) 触发或将函数绑定到被选元素的点击事件 $(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件...ready() 文档就绪事件（当 HTML 文档就绪可用时） resize() 触发、或将函数绑定到指定元素的 resize 事件 scroll() 触发、或将函数绑定到指定元素的 scroll 事件...select() 触发、或将函数绑定到指定元素的 select 事件 submit() 触发、或将函数绑定到指定元素的 submit 事件 toggle() 绑定两个或多个事件处理器函数，当发生轮流的...scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。 scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。 width() 设置或返回匹配元素的宽度。 1<!

2.5K4 0

jQuery基础--事件处理

最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。 on注册简单事件 // 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。...$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(events[,...触发事件 $(selector).click(); //触发 click事件 $(selector).trigger("click"); 2.5. jQuery事件对象 jQuery事件对象其实就是js...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation()

2.8K3 0

SCrollTOP scrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。...;"> div style="height:750px;"> div> div> 由于内部的div标签高度比外部的长，并且外部的div允许自动出现垂直滚动条... jquery-1.10.2.js"> div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。...本示例判断的是没有水平滚动条的情况，在有水平滚动条时，情况会有细小的变化，所以nScrollTop + nDivHight >= nScrollHight语句中，需要用“>=”比较运算符，而没有水平滚动条的时候

2.9K2 0

JQuery Div scrollTop ScrollHeight

jQuery 里和滚动条有关的概念很多，但是有三个属性和滚动条的拖动有关，就是：scrollTop、scrollLeft、scrollHeight。..."> div style="height:750px;"> div> div> 由于内部的div标签高度比外部的长，并且外部的div允许自动出现垂直滚动条，所以用浏览器打开后... jquery-1.10.2.js"> div的scroll（滚动）事件中侦测和执行if判断语句，是非常消耗CPU资源的。用鼠标拖拉滚动条，只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头，事件触发的频率会低得多。...本示例判断的是没有水平滚动条的情况，在有水平滚动条时，情况会有细小的变化，所以nScrollTop + nDivHight >= nScrollHight语句中，需要用“>=”比较运算符，而没有水平滚动条的时候

3.9K1 0

21.jQuery

触发 focus 事件 $("input[type=text]").blur() //元素失去焦点时,触发 blur事件 $("button").mousedown()//当按下鼠标时触发事件 $(...//当鼠标指针位于元素上方时触发事件 $("p").mouseout() 　//当鼠标指针从元素上移开时触发事件 $(window).keydown() //当键盘或按钮被按下时触发事件...$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次 $("input").keyup() //当按钮被松开时触发事件 $(window)....scroll() //当用户滚动时触发事件 $(window).resize() //当调整浏览器窗口的大小时触发事件 $("input[type='text']").change()...//当元素的值发生改变时触发事件 $("input").select() //当input 元素中的文本被选择时触发事件 $("form").submit() //当提交表单时触发事件 $

3.7K9 0

为什么要学jquery

jquery的入口函数使用jQuery的三个步骤：引入jQuery文件入口函数功能实现关于jQuery的入口函数： //第一种写法 $(document).ready(function() {...}); //第二种写法 $(function() { }); jQuery入口函数与js入口函数的对比： JavaScript的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。...$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation

1.6K1 0

jquery第一次课的案例教程

jquery的入口函数使用jQuery的三个步骤：引入jQuery文件入口函数功能实现关于jQuery的入口函数： //第一种写法 $(document).ready(function() {...$(selector).on( "click", function() {}); on注册委托事件 // 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，...// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用） // 第四个参数：handler，事件处理函数 $(selector).on(...（会计算滚动条的距离） //event.keyCode 按下的键盘代码 //event.data 存储绑定事件时传递的附加数据 //event.stopPropagation...但是如果与其他框架中的作为标示符，但是如果与其他框架中的冲突时，jQuery可以释放$符的控制权.

9011 0

Python全栈之jQuery笔记

dblclick() 鼠标双击当单击元素时,发生click事件....mouseenter/mouseleave只会在鼠标经过自己时触发事件....pageY:距离页面最顶部的左上角的位置(会计算滚动条的距离) event,keyCode:按下的键盘代码 event.data:存储绑定事件时传递的附加值 event.stopPropagation...2、touchmove: 手指在屏幕上滑动式触发 3、touchend: 手指离开屏幕时触发 4、touchcancel: 系统取消touch事件的时候触发...swipeDown 当元素被划过时触发.

6.7K4 0

随心所欲的滚动条，远离产品汪（二）

首先，我们需要明白我们的滚轮是作用在谁的身上，根据实际需求来进行事件绑定，当我们鼠标移入可视区时，会触发滚轮事件，在移出可视区时则清除滚轮事件，接下来进行具体代码操作。...ps:此处为了方便理解使用jQuery来实现,记得引入呦。较之上篇的实现代码，本篇中增加了两个变量。...1.通过设置变量Judge来判断滚轮的滚动方向，当Judge为ture时，滚轮向上滚动，当Judge为false时，滚轮向下滚动。...HTML5学堂-自定义滚动条 div> div class="boxscr" id = "bs">...div class="scr" id = "sc">div> div> div> jquery.js" type="text

2.5K8 0

JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决

和原生js获取高度的方式对比： 1.什么是clientHeight、scrollHeight和offsetHeight 学习原生js的人一定会接触到client家族、scroll家族和offset家族。...当父元素没有明确高度时，clientHeight和offsetHeight计算高度时，不会计算设置了绝对定位或者固定定位的元素的宽高，只会对子元素中的标准流元素和清除了浮动的浮动元素高度进行累加得到父元素的实际高度...scrollHeight计算高度时，会累加上以自身为定位祖先元素的所有后代定位元素的可视高度。...这个问题我也是这两天封装一个滚动条组件的时候才遇到的。...本来想着用盒子的scrollHeight去获取内容的高度，但是却导致了滚动条的抖动问题，原因是我让定位的后代元素随着滚动高度而改变位置和高度，导致scrollHeight获取到值发生改变，频繁地触发滚动条的刷新

7.2K1 0

点击加载更多

JQuery第三节

学习jQuery这一篇就够了

JQ事件和事件对象

H5C3第四节

jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

如何使用jQuery操作浏览器窗口事件？【jQuery框架应用入门15】

前端之jQuery

【JSjQuery——功能实现】传送门（蓝桥杯真题-2458）【合集】

浏览器中的几个高度

JS实现无限分页加载——原理图解

JavaWeb（八）JQuery

jQuery基础--事件处理

SCrollTOP scrollHeight

JQuery Div scrollTop ScrollHeight

21.jQuery

为什么要学jquery

jquery第一次课的案例教程

Python全栈之jQuery笔记

随心所欲的滚动条，远离产品汪（二）

JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐