首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何在jQuery中关注滚动条时禁用可拖动的div

在jQuery中,可以使用scroll事件来关注滚动条的位置,并通过设置CSS属性来禁用可拖动的div。下面是一个完整的示例代码:

HTML代码:

代码语言:html
复制
<div id="draggable" class="draggable">可拖动的div</div>

CSS代码:

代码语言:css
复制
.draggable {
  position: absolute;
  top: 50px;
  left: 50px;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  cursor: move;
}

.disabled {
  pointer-events: none;
  opacity: 0.5;
}

JavaScript代码:

代码语言:javascript
复制
$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var draggable = $("#draggable");

  if (scrollTop > 100) {
    draggable.addClass("disabled");
  } else {
    draggable.removeClass("disabled");
  }
});

在上述代码中,我们使用了scroll事件来监听滚动条的位置变化。当滚动条的scrollTop值大于100时,我们给可拖动的div添加了一个名为"disabled"的CSS类,该类设置了pointer-events为none和opacity为0.5,从而禁用了div的拖动功能并降低了其透明度。当滚动条的scrollTop值小于等于100时,我们移除了"disabled"类,使div恢复可拖动状态。

这是一个简单的示例,你可以根据实际需求进行修改和扩展。关于jQuery的更多用法和API,请参考jQuery官方文档

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jquery nicescroll 配置参数

jQuery滚动条插件兼容ie6+、手机、ipad http://www.areaaperta.com/nicescroll/ jQuery(function($){ $("#scrollInner...#FFF” cursorborderradius - 以像素为光标边界半径,默认为​​“递四方” zIndex - 改变z-index值滚动条div,默认值是9999 scrollspeed...- 使用硬件加速滚动支持时候(默认:true) boxzoom - 使变焦框内容(默认:false) dblclickzoom - (仅当boxzoom = TRUE)变焦激活,双击对话框(...touchbehavior = true,(默认:true) autohidemode,如何隐藏滚动条作品,真=默认/“光标”=只进游标隐藏/ false =不隐藏背景,CSS改变轨道背景下,...(对象拖动同样问题)(默认:true) cursorfixedheight,用于光标在像素设置固定高度(默认:false) hidecursordelay,设置在微秒淡出滚动条延迟时间(默认值

4.1K80

随心所欲滚动条,远离产品汪(二)

当中介绍了自定义滚动条基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动条上下拖动来控制内容区显示,使用过朋友会发现,如果对篇幅较长内容来说,不停拖动滚动条来查看内容,还是比较麻烦,...ps:此处为了方便理解使用jQuery来实现,记得引入呦。 较之上篇实现代码,本篇增加了两个变量。... <script src="<em>jquery</em>.js" type="text...轴坐标 newY = 0, // 鼠标<em>拖动</em><em>时</em><em>的</em>Y轴坐标 nowY = 0, // 鼠标<em>拖动</em><em>时</em><em>滚动条</em>C距父级顶部<em>的</em>高度 maxY = 0,...// <em>拖动</em><em>的</em>最大极限值 nowDisY = 0, // 点击<em>滚动条</em>C<em>时</em>距父级顶部<em>的</em>高度 judge = 0, // 判断鼠标滚轮<em>的</em>方向 scrY

2K80

SCrollTOP scrollHeight

大家好,又见面了,我是你们朋友全栈君。 jQuery 里和滚动条有关概念很多,但是有三个属性和滚动条拖动有关,就是:scrollTop、scrollLeft、scrollHeight。...滚动条向下拖动一段距离,看到页面效果如下(右部a、b是我抓图后,用PS标出来): 那么,这里外部div scrollTop、scrollHeight 属性到底是什么呢?...scrollHeight其实不是“滚动条高度”(b),而是表示滚动条需要滚动高度,即内部div高度750px。...程序,在外部divscroll(滚动)事件侦测和执行if判断语句,是非常消耗CPU资源。用鼠标拖拉滚动条,只要有一个像素变动就会触发该事件。但点击滚动条两头箭头,事件触发频率会低得多。...本示例判断是没有水平滚动条情况,在有水平滚动条,情况会有细小变化,所以nScrollTop + nDivHight >= nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条时候

2.2K20

JQuery Div scrollTop ScrollHeight

大家好,又见面了,我是你们朋友全栈君。 jQuery 里和滚动条有关概念很多,但是有三个属性和滚动条拖动有关,就是:scrollTop、scrollLeft、scrollHeight。...滚动条向下拖动一段距离,看到页面效果如下(右部a、b是我抓图后,用PS标出来): 那么,这里外部div scrollTop、scrollHeight 属性到底是什么呢?...scrollHeight其实不是“滚动条高度”(b),而是表示滚动条需要滚动高度,即内部div高度750px。...程序,在外部divscroll(滚动)事件侦测和执行if判断语句,是非常消耗CPU资源。用鼠标拖拉滚动条,只要有一个像素变动就会触发该事件。但点击滚动条两头箭头,事件触发频率会低得多。...本示例判断是没有水平滚动条情况,在有水平滚动条,情况会有细小变化,所以nScrollTop + nDivHight >= nScrollHight语句中,需要用“>=”比较运算符,而没有水平滚动条时候

2.7K10

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

如果你构建一个很有特色和创意网页,那么肯定希望定义网页滚动条样式,这方面的 jQuery 插件比较不错,有两个:jScrollPane 和 mCustomScrollbar。...,它通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动支持,并且在滚动过程,还可以缓冲滚动使得滚动更加平滑,还可以自动调整滚动条位置和定义滚动到位置等...其中以下四个文件必须要上传到服务器上: jquery.mCustomScrollbar.js jquery.mousewheel.min.js jquery.mCustomScrollbar.css...先来说说上面用到这些文件用途和简单介绍: jQuery:这个插件必备库,你懂。 jQuery UI:扩展 jQuery 库并且为我们滚动条提供了简单动画和拖动功能。...关于更多进阶使用和技巧,欢迎跟我交流,也可以关注本文,会在后面陆续添加。 ----

14K30

jquery 置顶菜单

初始状态如上图,当拖动右侧滚动条,菜单置顶时候需要固定位置,如下: ? 注意:当Banner图片完全上移出了浏览器可视区域,此时菜单固定定位在文档最上方。 首先编写基本HTML以及CSS ?...此时有一个问题,就是滚动条往上拖时候,无法恢复看到banner,一直被menu覆盖着。...对于这个问题,只需要设置当$(document).scrollTop() <= 100 或者 if 判断 else分支,恢复position为定位默认值即可。 那么问题来了!!...编写menu当滚动条往上拖动时候,恢复原来定位,可以展示出banner ? 当设置postion:static时候,定位方式就会恢复文档流布局。其中top和left就会失效。...设置一个menu背景div,当menu固定定位时候,设置这个背景div撑住文档流位置,这样就可以规避这个问题了。 增加一个背景div ?

3.9K20

随心所欲滚动条,远离产品汪(一)

轴坐标 newY = 0, // 鼠标拖动Y轴坐标 nowY = 0, // 鼠标拖动滚动条C距父级顶部高度 maxY = 0...= scHeight + "px"; b) 鼠标拖动坐标位置 无论开始鼠标点击滚动条哪一个位置,都将视为点击滚动条顶点坐标。...即:滚动条滚动距离 = 拖动后鼠标变化Y值 – 点击鼠标获取Y值 nowY = nowDisY + newY - oldY; // 拖动滚动条Ctop值 c) 实现滚动条拖动 在实现滚动条拖动同时...,我们并不能忽视滚动条的当前位置,当二次拖动,此时滚动条或许已经偏离了初始位置。...即: 当前滚动条位置top值 = 拖动后鼠标变化Y值 – 点击鼠标获取Y值 + 初始滚动条top值 nowY = nowDisY + newY - oldY; // 拖动滚动条Ctop

1.5K50

一些好用jquery技巧

1、返回顶部按钮 通过使用jQueryanimate 和scrollTop 方法,不用插件就可以创建一个滚动到顶部简单动画: // Back to top $('.top').click(function...6、禁用输入字段 有时候,你可能想要禁用表格提交按钮或它某一项文字输入直到用户执行了特定操作(例如,勾选“我已阅读相关条款”复选框)。...修复时候要小心这个问题。 12、通过文本查找元素 通过使用jQuerycontains() 选择器,你可以找到元素内容文本。...、在改变Visibility触发 当用户不再关注某个tab,或重新聚焦原来那个tab上,触发JavaScript: $(document).on('visibilitychange', function...jQuery可以让代码变得更短和更快代最佳做法。

3.9K60

2019-08-09 满屏切换vue项目中使用 vue-fullpage.js

, // //页面滚动速度 // scrollingSpeed: 700, // //定义锚链接,用户可以快速打开定位到某一页面;不需要加"#",不要和页面任意id和name相同...,将不会按页滚动 // autoScrolling: false, // //是否包含滚动条,设为true,则浏览器自带滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效...slidesNavPosition: bottom, // //内容超过满屏是否显示滚动条,需要jquery.slimscroll插件 // scrollOverflow: true...,将不会按页滚动 // autoScrolling: false, // //是否包含滚动条,设为true,则浏览器自带滚动条会出现,页面还是按页滚动,但是浏览器滚动条默认行为也有效...slidesNavPosition: bottom, // //内容超过满屏是否显示滚动条,需要jquery.slimscroll插件 // scrollOverflow: true

11.8K30

Vue.Draggable 文档总结

特性 支持触摸设备 支持拖拽和选择文本 支持智能滚动 支持不同列表之间拖拽 不以jQuery为基础 和视图模型同步刷新 和vue2国度动画兼容 支持撤销操作 当需要完全控制,可以抛出所有变化 可以和现有的...和v-model不能共用 从表现上没有看出不同 element String,默认div 就是标签在渲染后展现出来标签类型 也是包含拖动列表和插槽外部标签 可以用来兼容UI...选择器字符串,使列表单元符合选择器元素成为拖动手柄,只有按住拖动手柄才能使列表单元进行拖动 filter: selector 格式为简单css选择器字符串,定义哪些列表单元不能进行拖放,...dragClass:selector 格式为简单css选择器字符串,目标拖动过程添加 forceFallback: boolean 如果设置为true,将不使用原生html5拖放,可以修改一些拖放中元素样式等...setData: 设置值回调函数 onChoose: 选择单元回调函数 onStart: 开始拖动回调函数 onEnd: 拖动结束回调函数 onAdd:

8.7K20

从 antDesign 来窥探移动端“滚动穿透”行为

现象 直观上来说所谓 Scroll Chaining(滚动链接)通常会在两种情况下被意外触发: 拖动不可滚动元素滚动背景意外滚动。...常见业务场景比如在 Dialog、Mask 等存在全屏覆盖内容,当我们拖动不可滚动弹出层元素内容,背后背景元素会被意外滚动。...比如上方图片中有两个元素,一个为红色边框存在滚动条父元素,另一个则为蓝色边框黑色背景不存在滚动条子元素。 当我们拖动不可滚动子元素,实际会意外造成父元素会跟随滚动。...将可滚动元素拖动至顶部或者底部,继续拖动触发最近滚动祖先元素滚动。 还有另一种常见场景,我们在某个滚动元素上进行拖动,当该元素滚动条已经到达顶部/底部。...// 3.5 当 status 为 01 (对应 3.2 滚动条在顶部),此时当用户从下往上拖动,需要阻止意外滚动行为发生。否则,则不需要阻止正常滚动。

40320

Dragdealer拖动组件

Options 配置选项 bool disabled=false 初始化为禁用状态。该操作会给被操作手柄增加一个.disabled类属性。 bool horizontal=true 是否水平拖动。...这约束了手柄可以放在这些步数以内任意位置。,将滑动器steps设置为3,将会只允许你将滑动器移动到左侧、中间和右侧3个位置。...bool snap=false 如果设置了steps数量,是否在拖动过程,是否让手柄立即卡到最近位置。打个比方,snap=false像是无级变速,true是固定档位。...fn dragStartCallback(x, y) 和dragStopCallback(x,y) 一样,但只在拖动开始触发,参数值为拖动位置。...Methods 方法 disable 禁用拖动组件,相当于设置disabled选项,拖动组件被设置.disabled类。 enable 启用拖动组件,手柄.disabled 类将被移除。

3.9K20

CSS加JS实现网页返回顶部功能

大家好,又见面了,我是你们朋友全栈君。 最近在设计自己博客,前端页面在内容很多时候往下拖动会有滚动条。通常我们都需要一个返回顶部功能来实现快速来到网页顶部。...当然实现方式不止一种,这里我采用最实用一种。使用CSS+Jquery方式 代码量相对较少,容易理解。...实现原理 1.我们需要再DOM添加自己DIV,里面包含一个a标签,a标签里面包含两个img标签用于存放返回顶部图片。...2.添加必要CSS样式 3.然后通过JS代码实现当网页滚动100px以下,返回顶部图标开始逐渐出现。相反则图标逐渐消失。这里面有一个渐变效果。 4.当点击a标签,JS实现延迟滚动网页到顶部。...> $(function () { //当滚动到距顶部100像素以下,出现箭头图标,否则消失

6K20

easyui(一) 初始easyui「建议收藏」

easyui就是一个前端框架,JQuery EasyUI是一组基于jQueryUI插件集合体,而jQuery EasyUI目标就是帮助web开发者更轻松打造出功能丰富并且美观UI界面.开发者不需要编写复杂...名字为easyui-开头,找到之后,将eayui-”name”,name拿到,拿到之后将这些标签处理为(渲染为)可以 拖动改变大小效果...函数将其处理为(渲染为)可以拖动改变大小效果 2.2、使用resizable组件属性两种方式            方式一:html方式 <!...结合文档注释 disabled:表示是否禁用大小调整功能,true:禁用 false:不禁用(默认) handles:申明调整大小方向,n, e...结合文档注释 disabled:表示是否禁用大小调整功能,true:禁用 false:不禁用(默认) handles:申明调整大小方向,n, e

2.9K30

table固定表头,tbody滚动条样式设置以及填几个坑

工作或许会用到 table 表格固定表头, tbody 滚动效果。为了方便我这里直接用 Bootstrap 表格样式。 ?...比较常用方法是,将 table thead 和 tbody 拆分成两个表格,用 div 包起来,给 div 设置固定高度和 overflow: auto; 属性(其实只给 tbody table...可以参照 CSS滚动条选择器设置滚动条样式,如下。 以下伪元素选择器可以修改 webkit 浏览器滚动条样式: ::-webkit-scrollbar 整个滚动条....滚动条轨道 ::-webkit-scrollbar-track-piece 滚动条没有滑块轨道部分 ::-webkit-scrollbar-corner 当同时有垂直滚动条和水平滚动条交汇部分...::-webkit-resizer 某些元素corner部分部分样式(:textarea拖动按钮) 语法: ::-webkit-scrollbar { styles here } 例子: 直接隐藏滚动条

12.2K20

【CSS】固定定位 ( 固定定位概念语法 | 固定定位 = 浏览器可视窗口 + 边偏移 | 代码示例 )

一、固定定位概念语法 ---- 固定定位 是 固定在屏幕某个位置 , 即使拖动滚动条 , 固定定位元素仍然保持位置不变 ; 固定定位 完全脱离 标准流 , 不占用 布局位置 , 漂浮在任何元素上方...; 固定定位 只相对于 浏览器可视窗口 进行定位 , 定位方式是通过 " 浏览器可视窗口 + 边偏移 " 进行定位 ; 固定定位 与 父元素没有任何关系 ; 固定定位 与 滚动条滚动没有任何关系 ;...就是 固定定位元素 , 拖动滚动条并不会 改变 固定定位 元素位置 ; 低版本浏览器不支持固定定位 , : IE6 浏览器 ; 二、固定定位代码示例 ---- 在上一篇博客【CSS】定位...⑥ ( 使用绝对定位在父容器任意位置显示子容器 | 代码示例 ) 代码基础上 , 将中心标准流元素设置为 固定定位 元素 ; 为 body 设置高度 1000px , 方便进行滚动条滚动 ;...div> 展示效果 : 默认进入后样式 : 滚动拖动条后效果 :

1.7K20

【Scratch入门到精通】blocks 积木区风格定制

一,前言 本文主要讲解,怎么定制 scratch-blocks 积木区风格,主题色,滚动条,积木工作区边界限制等。并深入源码,探究其根本。...定制能力有限,若需要更多复杂高级风格定制,可使用CSS样式覆盖方式,关注后续文章讲解。...滚动条位置 示例把积木区垂直滚动条移动到了工作区左侧,其主要实现方式为重写scratch-blocks/scrollbar.js方法,重写后方法如下。...滚动条可见性 工作区没有任何积木,期望滚动条隐藏不可见。...积木块移动距离 通过重新类方法点击查看Gesture使用,限制积木块拖动距离,当超出可视工作区上/左边界,对积木块移动距离重置,使其不超出可视工作区边界。

2.4K20
领券