`
sayong
  • 浏览: 12644 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

让scroll事件在滚动条停止时响应

阅读更多
用过scroll事件的人都知道,在每次拖动滚动条的时候会相应的事件会相应多次,而在大多数情况下我们都只希望它在滚动条停止滚动的时候 响应。经过多次测试,终于发现了一个比较好的解决方案,那就是通过setTimeout,给scroll加个延迟。例如用jQuery为页面加入 scroll事件,可以这样写:
    var timeout = false; 
    $(window).scroll(function(){ 
        if (timeout){clearTimeout(timeout);} 
        timeout = setTimeout(function(){ 
            //do 
        },100); 
    ); 


原文地址:http://www.lav.so/index.php?aid=2
分享到:
评论
1 楼 白色熊猫 2014-04-18  
不错,谢谢了

相关推荐

    浏览器滚动条到达底部,处发事件

    在网页开发中,"浏览器滚动条到达底部,触发事件"是一种常见的交互设计,常用于实现无限滚动或分页加载更多内容的功能。这种效果在社交媒体网站如微博、Facebook等上广泛使用,用户滚动到页面底部时,会自动加载新的...

    javascript经典特效---滚动条闪动的控制.rar

    在实现滚动条效果时,我们需要获取滚动条相关的DOM元素,这可能包括页面的body元素或其他包含滚动条的div。 2. **CSS样式控制**:JavaScript可以改变元素的CSS样式。对于滚动条,我们可能需要更改`scrollbar-color`...

    Visual C++可视化编程 滚动条的使用

    本节将深入探讨如何在MFC(Microsoft Foundation Classes)框架下使用滚动条控件,包括创建、设置属性以及响应滚动事件。 首先,要在应用程序中添加滚动条,我们需要在资源编辑器中创建一个新的对话框,并从工具箱...

    拖动div 内部有滚动条

    1. **CSS样式设定**:首先,为 `div` 设置合适的宽度、高度和溢出隐藏(`overflow: auto` 或 `overflow-y: scroll`),以便在内容过多时自动出现滚动条。同时,可能需要设置边框、内边距和外边距以美化布局。 2. **...

    android控制滚动条有规律的滚动

    在Android开发中,有时我们需要创建一个具有特定动画效果的用户界面,例如,让滚动条有规律地滚动,就像在网易新闻应用中常见的那样。这个"android控制滚动条有规律的滚动"的Demo就是一个很好的示例,它展示了如何...

    纯js实现横向,纵向滚动条

    我们可以在这个事件处理函数中更新自定义滚动条的位置,使其与实际滚动位置同步。 3. **滑动逻辑** 滚动条的滑块需要响应用户的拖动操作。为此,我们需要监听`mousedown`、`mousemove`和`mouseup`事件。在`...

    javascript windows式上下滚动条

    2. **JavaScript事件监听**:为了实现滚动条的交互,我们需要监听滚动事件,比如`scroll`。通过`addEventListener`方法,我们可以绑定到页面或特定元素的滚动事件上,当用户滚动时执行相应的函数。 3. **计算滚动...

    jQuery自定义滚动条完整实例

    在本例中,虽然没有直接使用`scroll`事件,但在自定义滚动条的实现中,通常需要监听滚动条所在的容器的`scroll`事件来同步滚动内容。 #### 5. 鼠标事件的使用 在自定义滚动条实现中,使用了以下鼠标事件: - `...

    仿淘宝商城 图片随滚动条加载

    "仿淘宝商城 图片随滚动条加载" 的技术就是一种优化加载策略,它采用了一种叫做“懒加载”(Lazy Loading)的方法,旨在改善页面加载速度,降低用户等待时间,并减少服务器负担。 懒加载的核心思想是在网页初次加载...

    jquery判断滚动条距离顶部的距离方法

    在网页开发中,有时我们需要知道用户滚动页面时,滚动条相对于页面顶部的位置。这在创建响应式设计、固定导航栏或者实现滚动特效时非常有用。标题提到的“jquery判断滚动条距离顶部的距离方法”就是这样的一个功能,...

    SmoothONePageScroll单页面滚动

    当滚动事件触发时,插件会计算滚动条的位置,并决定是否启动平滑滚动动画。 2. **动画实现**:平滑滚动通常使用CSS3的`transform: translateY()`属性结合`transition`属性实现。JavaScript会动态改变元素的`...

    滚动实例11

    3. **平滑滚动**(Smooth Scrolling):平滑滚动使页面在用户点击链接或使用滚动条时,内容能够平滑过渡,而不是瞬间跳转。这提升了用户体验,使页面滚动更流畅。通过CSS3的`scroll-behavior`属性或者JavaScript库如...

    随滚动条滚动特效代码

    在网页设计中,滚动条滚动特效是一种常见的交互设计元素,它可以增强用户体验,使网页更具动态美感。这种特效通常通过JavaScript、CSS或者现代前端框架如jQuery、Vue.js、React等实现。下面将详细探讨如何创建随滚动...

    js事件设计

    - 窗口和文档变化:`resize`(窗口尺寸改变)、`scroll`(滚动条移动)、`hashchange`(URL哈希值变化)。 - 表单事件:`submit`(表单提交)、`focus`(元素获得焦点)、`blur`(元素失去焦点)、`change`(输入值...

    jquery鼠标滚动列表切换代码.zip

    3. **计算偏移量**:在滚动事件中,我们需要获取滚动条的当前位置,通常可以使用`$(window).scrollTop()`来获取垂直滚动条的位置。如果涉及到水平滚动,可以使用`$(window).scrollLeft()`。 4. **切换效果**:根据...

    autoScroll-html.rar

    描述指出滚动条在页面到底部时会自动滚动,而当滚动条不在底部时则停止自动滚动,这通常涉及到网页的动态滚动效果。 在网页开发中,自动滚动是一种增强用户体验的常见技术。它常用于实时更新内容的页面,如聊天室或...

    JavaScript 无缝上下滚动加定高停顿效果

    - **事件响应**:当鼠标悬停在滚动区域上时停止滚动,鼠标离开后恢复滚动。 #### 4. 其他重要概念 - **变量管理**:代码中使用了多个局部变量和成员变量来管理滚动状态,如`heightScroller`、`heightList`等。 - **...

    scroll-movie:基于滚动的动画页面

    通过`window.pageYOffset`或`document.documentElement.scrollTop`等属性可以获取当前滚动条的位置。根据这个位置,我们可以判断元素是否进入或离开视口,进而决定是否启动或停止动画。 ### 3. CSS动画 CSS动画...

    jQuery插件创建一个容器元素的垂直滚动面板

    4. **事件处理**:监听滚动事件,如`scroll`,以便在用户滚动时响应,可能需要计算滚动位置并更新面板状态。 5. **动画效果**:如果需要平滑滚动,可以使用jQuery的`animate`方法来实现。 6. **API接口**:提供...

    js鼠标滚动图片等比例缩放代码.zip

    2. **计算滚动位置**:`handleScroll`函数中,可以获取当前滚动条的位置,例如通过`window.pageYOffset`或`document.documentElement.scrollTop`。 3. **图片等比例缩放**:根据滚动距离,调整图片的缩放比例。这...

Global site tag (gtag.js) - Google Analytics