`

Jquery控制滚动Div 滚动条事件

阅读更多

    $('#classifyTree')
     .bind('mousewheel', function(event) {
         var realScrollHeight=event.currentTarget.clientHeight+event.currentTarget.scrollTop;
         //如果向下滚动大于最终滚动高度后
         if(realScrollHeight >=event.currentTarget.scrollHeight){
             if(event.originalEvent.wheelDelta>0){
                 //向上滚动
                 return true;
             }
             return false;
         }else{
             //如果滚动条最终距离为0,不允许再向上滚动
             if(event.currentTarget.clientHeight==realScrollHeight){ 
                 //如果滚动条小于最终高度
                 if(event.originalEvent.wheelDelta<0){
                     //向下滚动
                     return true;
                }
                 return false;
             }
         }
         return true;
     });

 

最近项目中出现一个页面中有多个Div滚动,这样用户体验是非常不爽的,主要原因在于如果用滚轮滚动滚动条到最顶部或最底部,他外层的滚动条也会跟着滚动,这样会让人眩晕,,出于这个问题,写了一个指定区域内滚动限制方法,如下:

 

 

 

分享到:
评论

相关推荐

    jqueryDIV滚动条

    jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jquery滚动条jsDIV滚动条jsDIV滚动条jsDIV滚动条

    jquery控制滚动条下拉后DIV容器在页面中的位置

    标题中的“jquery控制滚动条下拉后DIV容器在页面中的位置”是指利用jQuery库来实现一个功能,即在用户滚动网页时,使指定的DIV元素始终保持在屏幕的某个固定位置,这种效果通常被称为“粘性导航”或“固定定位”。...

    利用div+jquery自定义滚动条

    在这里,`div`可以作为我们需要自定义滚动条的容器,通过设置`overflow`属性来控制内容超出时是否显示滚动条。例如,如果想让div在内容过多时显示横向滚动条,可以这样设置CSS样式: ```css div.scroll-container {...

    jquery监听DIV的事件

    本篇文章将深入探讨如何使用jQuery来监听一个DIV元素的事件,以便于我们在其状态变化时执行相应的代码。 首先,理解jQuery中的事件处理是非常重要的。jQuery提供了丰富的API来绑定和触发DOM元素上的事件。在jQuery...

    jQuery实现将div的滚动条滚动到指定位置

    在网页开发中,jQuery是一个非常...总的来说,通过jQuery的`animate()`方法,我们可以轻松地实现div滚动条的动态控制,为用户提供更加友好的交互体验。这个功能在展示长列表、分页内容或者需要聚焦某个部分时特别有用。

    jquery使用div实现滚动条效果

    本篇文章将详细讲解如何利用jQuery实现一个div元素的滚动条效果,以及涉及到的相关知识点。 首先,我们需要理解滚动条的基本概念。滚动条是当内容超出容器显示范围时出现的一种用户界面元素,允许用户查看或浏览不...

    jquery定制div滚动条Scrollbar

    标题中的“jquery定制div滚动条Scrollbar”涉及到的是一个使用jQuery库来实现自定义滚动条功能的技术。在网页设计中,滚动条通常是浏览器默认样式,但通过jQuery插件,我们可以为div元素创建具有个性化外观和交互...

    jquery水平滚动条

    **jQuery 水平滚动条详解** 在网页设计中,滚动条是一个不可或缺的元素,尤其在展示大量数据或内容时。jQuery,一个广泛使用的JavaScript库,提供了丰富的功能和方法来定制和增强滚动条效果,使其更加美观且符合...

    Jquery跟随滚动条移动的div动画效果

    "Jquery跟随滚动条移动的div动画效果"就是一个典型的例子,它利用jQuery库实现了一个div元素随着页面滚动条移动而同步移动的特效,而且这个div在移动过程中保持平滑,避免了闪烁现象,提升了用户体验。 首先,...

    jQuery局部div滚动加载远程数据

    "jQuery局部div滚动加载远程数据"这个主题是关于如何利用jQuery实现一个功能,即当用户滚动到页面的某个div区域时,动态地从服务器加载更多的数据,这种技术通常称为"无限滚动"或"滚动加载"。这个特性在新闻网站、...

    JQuery 随鼠标滚动条滚动的div

    标题中的“JQuery 随鼠标滚动条滚动的div”是指使用JQuery库来实现一个功能,即当用户滚动页面时,某个特定的div元素会跟随滚动条一起移动。这个功能在网页设计中常见于侧边栏菜单、广告条或者固定导航栏等,目的是...

    jquery自定义滚动条插件

    **jQuery自定义滚动条插件**是一种用于增强网页滚动体验的工具,尤其在现代Web设计中,为了提供更美观和个性化的界面,自定义滚动条变得越来越重要。本插件适用于IE8及以上的浏览器,允许开发者对滚动条的外观和行为...

    6种效果jquery页面滚动div层固定插件hcsticky

    总的来说,jQuery HCSticky插件是实现页面滚动div层固定效果的有力工具,通过简单的配置即可实现多样化的效果,极大地提高了网页的交互性和可用性。通过分析`index.html`和各`demo.html`文件,开发者可以深入理解...

    jQuery无限滚动加载图片瀑布流代码

    **jQuery无限滚动加载图片瀑布流代码详解** 在网页设计中,瀑布流布局(Masonry Layout)因其独特的展示方式,能够使页面元素排列得既美观又节省空间,特别适合用于图片展示类网站。jQuery无限滚动加载图片瀑布流...

    网页局部div随滚动条置顶滚动

    标签中提到的“jquery滚动”是指使用jQuery来处理滚动事件,这在复杂情况下提供了更多的灵活性和控制力。不过,现代浏览器已经原生支持滚动事件,因此在不需要额外功能的情况下,使用纯JavaScript处理也是完全可行的...

    用jquery改变DIV的滚动条的样式

    本篇文章将深入探讨如何使用`jQuery`来改变`DIV`元素的滚动条样式,包括滚动滑块和上下按钮的图片。 首先,我们要了解浏览器默认的滚动条样式通常是单调且不一致的。为了改变这种状况,我们可以借助第三方插件,如`...

    jQuery+mousescroll.js自定义美化div滚动条插件

    "jQuery+mousescroll.js自定义美化div滚动条插件"就是这样一个工具,它旨在将传统的浏览器滚动条转变为更加符合现代审美且交互友好的元素。这款插件允许开发者轻松地自定义滚动条样式,使其与网站的设计风格保持一致...

    jquery带滚动条图片滚动

    jQuery滚动事件 接下来,我们需要监听滚动条的滚动事件。jQuery的`.scroll()`方法可以绑定这个事件: ```javascript $('#imageScroller').scroll(function() { // 在这里处理滚动事件 }); ``` ### 5. 计算滚动...

    jquery特效DIV层跟随页面向下滚动

    总的来说,"jquery特效DIV层跟随页面向下滚动"是一种增强网页交互性的常见技术,它结合了jQuery的选择器、事件处理和样式控制,使关键内容始终保持可见,提高用户的浏览体验。在实际项目中,可以通过调整CSS样式和...

    jQuery控制div实现随滚动条滚动效果

    jQuery控制div实现随滚动条滚动效果是Web前端开发中常见的一个功能,涉及到了JavaScript事件处理、动画制作等技术点。通过对这些技术的掌握和应用,可以增加页面的互动性和用户的体验感。实现这一效果的方法不止一种...

Global site tag (gtag.js) - Google Analytics