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

如何使用JQuery/Javascript控制IE 11的每个鼠标凹口的滚动

使用JQuery/Javascript控制IE 11的每个鼠标凹口的滚动,可以通过以下步骤实现:

  1. 首先,确保你已经引入了JQuery库,可以通过以下方式在HTML文件中引入:
代码语言:txt
复制
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 接下来,你可以使用JQuery的scroll()方法来监听滚动事件。例如,如果你想监听整个文档的滚动事件,可以使用以下代码:
代码语言:txt
复制
$(document).scroll(function() {
  // 在这里编写滚动事件的处理逻辑
});
  1. 如果你只想监听特定元素的滚动事件,可以使用该元素的选择器来替换document。例如,如果你有一个具有idmyElement的元素,你可以使用以下代码来监听该元素的滚动事件:
代码语言:txt
复制
$("#myElement").scroll(function() {
  // 在这里编写滚动事件的处理逻辑
});
  1. 在滚动事件的处理逻辑中,你可以使用JQuery的scrollTop()方法来获取滚动条的垂直位置。例如,你可以使用以下代码来获取滚动条的垂直位置:
代码语言:txt
复制
var scrollTop = $(document).scrollTop();
  1. 接下来,你可以根据滚动条的位置执行相应的操作。例如,你可以根据滚动条的位置显示或隐藏某个元素,或者根据滚动条的位置改变某个元素的样式。以下是一个示例代码,当滚动条的位置大于100像素时,显示一个具有idmyElement的元素:
代码语言:txt
复制
$(document).scroll(function() {
  var scrollTop = $(document).scrollTop();
  if (scrollTop > 100) {
    $("#myElement").show();
  } else {
    $("#myElement").hide();
  }
});

这样,你就可以使用JQuery/Javascript控制IE 11的每个鼠标凹口的滚动了。

请注意,以上代码仅适用于IE 11浏览器。对于其他浏览器,可能需要使用不同的方法来实现相同的效果。

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

相关·内容

如何优雅使用 JavaScript 控制

0写在前面 JavaScript 最基础 debug 工具之一就是console.log()。console也自带其他一些其他有用方法,可以丰富开发者 debug 工具包。...一个关于 BOM 快速注解: 它没有一套统一标准,所以每个浏览器实现方式略有不同。...2 输出文本 在控制台记录文本 console对象最常用一个元素是console.log。很多场景下,你都需要使用它来完成工作。...有四种不同方式可用于在控制台中输出信息: log info warn error 这四种工作方式是一样。你所要做只是在选定方法上传递一个或多个参数。...console.table(['Javascript', 'PHP', 'Perl', 'C++']); 输出一个数组 数组索引或者对象属性名显示在左侧一列,对应值则显示在右侧一列。

1.1K20

06-移动端开发教程-fullpage框架

我们经常见到一些全屏特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQueryfullPage.js的如何使用及常用配置。...1. fullpage.js主要功能 fullPage.js是一个基于jquery插件,它能很方便制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。...2. fullpage.js使用 2.1 兼容性 fullpage.js是jQuery插件,需要依赖jQuery,要求jQuery最低版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...--引入jQuery插件fullpage.js核心文件--> 2.4...向左滚动 setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling

5.1K50
  • 06-移动端开发教程-fullpage框架

    我们经常见到一些全屏特绚丽页面,手指或者鼠标滑动一下就是一整屏切换,而且还有各种效果。比如:全屏滑动案例 下面我们就介绍一下jQueryfullPage.js的如何使用及常用配置。...1. fullpage.js主要功能 fullPage.js是一个基于jquery插件,它能很方便制作出全屏网站,github地址。 主要功能有: 支持鼠标滚动。 支持前后退和键盘控制。...2. fullpage.js使用 2.1 兼容性 fullpage.js是jQuery插件,需要依赖jQuery,要求jQuery最低版本是1.6+。浏览器能兼容到ie8+及其他现代浏览器。...--引入jQuery插件fullpage.js核心文件--> 2.4...向左滚动 setAutoScrolling() 设置页面滚动方式,设置为 true 时自动滚动 setAllowScrolling() 添加或删除鼠标滚轮/触控板控制 setKeyboardScrolling

    5.1K90

    基于jQuery 常用WEB控件收集

    它能够在一个页面中加入多个颜色选择控件,然后每个控件关联到页面中一个元素比如:文本输入框。 Farbtastic ContextMenu 用于创建右键弹出菜单jQuery插件。...,并加上鼠标指向时暂停效果(Pause),可以当作图库展示或是动画及广告Banner使用。...提供所有基本RichText功能,调整文本区域大小,使用AjaxFileUpload插件上传图片,清除HTML标签,标记文本修改,支持多种浏览器(FF1.5+、IE7、IE6)。...jFeed jQuery.combobox jQuery.combobox是一个采用jQuery开发combobox控件,可以使用CSS控制该combobox外观,可以设置各种不同风格下拉动画效果...jQuery Context Menu jQuery Right-click 这个插件能够让你使用jQuery来捕获由鼠标右键触发事件。

    7.5K10

    javascript实例:逐条记录停顿走马灯

    效果: 需求: 1.记录循环滚动; 2.每组记录之间不能有留白; 3.每条记录上移到容器顶部时要停顿一下; 4.鼠标移入容器时停止滚动,移出时继续滚动。...曾想用实现方法: 1.使用Marquee:本来想用Marquee搞定,使用十分方便,但不满足需求2,3,加上只能用于IE浏览器。。。。。。。。...2.使用Jquery:我没有学过Jquery,只是简单调用同事方法,但发现居然出现语法错误,同事也只是从网上拷过来不懂得哪里出错。。。。。。 于是只好硬着头皮自己写一个吧!...我思路是:当最顶记录完全移出容器时,把该记录移动到所有记录底部 (图很丑但很温柔^_^) 下面是实现:(ie6、7、8,chrome都OK!)...因为offsetTop为只读,最终控制元素位置要用style.top,而两者表达含义又有所区别,所以这里我直接用style.top来获取定位和设置定位。

    1.5K50

    学习jQuery这一篇就够了

    # 1. jQuery 简介 # 1.1 jQuery 简介 jQuery 是一个高效精简并且功能丰富 JavaScript 工具库。...目前超过 90% 网站都使用jQuery 库,jQuery 宗旨:写更少,做得更多!...).scrollLeft(); 设置页面滚动滚动到指定位置 (兼容 chrome 和 IE) $('body,html').scrollLeft(60); 需求描述:设置页面的宽度为 2000px,设置滚动...).scrollTop(); 设置页面滚动滚动到指定位置 (兼容 chrome 和 IE) $('body,html').scrollTop(60); 需求描述:设置页面的高度为 2000px,设置滚动...需求描述:创建两个 div,当鼠标移到外层 div 时候,向控制台输出 “mouse over”,鼠标移到内层 div 时候,向控制台输出 “mouse over”,当鼠标移到外层 div 时候,

    98650

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

    当中介绍了自定义滚动基本原理与实现方法,在自定义滚动条实现后,可以通过对滚动上下拖动来控制内容区显示,使用朋友会发现,如果对篇幅较长内容来说,不停拖动滚动条来查看内容,还是比较麻烦,...滚轮事件及兼容问题概要 在鼠标上,除了点击、拖拽等事件,当然也少不了滚轮事件了,但是比较有意思一点是,平常大家碰到兼容问题首先想到了IE这个万年背锅侠,但是这次还真不是,火狐别树一帜凑了一回热闹。...3.当滚动鼠标的时候,火狐浏览器通过检测datail正负号就可以确定, 而其它浏览器IE、谷歌通过检测wheelDelta正负来确定。...ps:此处为了方便理解使用jQuery来实现,记得引入呦。 较之上篇实现代码,本篇中增加了两个变量。..., // 滚动区D高度 cnHeight = cn.offsetHeight; // 滚动块B高度 // 根据滚动块B实际内容高度控制滚动条C高度

    2K80

    JavaScript 获取鼠标及元素在页面上位置

    HTML5学堂:JavaScript获取鼠标的位置,大家会想到clientX/Y等属性,灵活获取鼠标的位置信息,能够便于我们实现各种复杂页面交互效果,到底还有哪些属性可以获取鼠标的位置信息?...另外,还有哪些能快速获取标签在页面中位置信息? 在书写一些“拖拽”页面交互效果,比如常见拖拽效果、自定滚动条、放大镜等效果,都需要用到了鼠标或元素在页面上位置信息。...咱们都知道浏览器可视区域位置是固定不发生滚动,所以,clientX/Y属性获取鼠标位置不会随页面滚动而改变; 兼容性:所有浏览器都能支持。...就是这一点,导致我们使用起来灵活性不高,不是所有页面交互效果用到鼠标位置都是参考浏览器可视区域左上角,有可能是参考自身元素左上角,那么clientX/Y属性能否胜任呢?...~ 可是,可是,它浏览器支持程度会让你有一种淡淡忧伤,堡堡心理苦,但是堡堡不说~ 兼容性:IE6/7/8不支持,IE9+和Chrome、Safari、Firefox都支持 友情提醒:在IE10+浏览器

    3.4K60

    杨老师课堂之Jquery筛选,事件,效果,Ajax,javascript跨域)

    .jquery 对其进行了封装,使之能兼容各大浏览器 (4) event.target()方法 event.target()方法作用是获取到触发事件元素.jquery对其封装后,避免了 W3C,IE...() 方法是在mouseover中相当于 IE浏览器event.fromElement()方法,在mouse 中相当于IE浏览器event.toElement方法. jquery对其进行了封装,使之能兼容各大浏览器...该方法作用是获取到光标相对于页面的x坐标和y坐标.如果没有使用jquery时,那么IE浏览器中 是使用event.pageX()和event.pageY()方法.如果页面上有滚动条,则还要加上滚动宽度和高...•fn:在动画完成时执行函数,每个元素执行一次。...跨域:在一个服务器上,去访问另一个服务器 jQuery如何实现跨域请求?使用JSONP形式实现跨域。 javascript如果调用另一个域程序,不能执行当前域js函数。

    8.3K20

    如何使用 CSS Grid 布局 IOS11控制中心

    昨天 IOS11 就可以开始安装更新了,下图就是它带来控制中心界面,是不是有点像带圆角 Win10 风格? ? 设计相互借鉴这里就不展开了,下面我们直接开局。...设计拆分网格 我们先来根据效果图拆格子,如下图,红线表示水平线,白线表示垂直线,这样就构成了我们 4*4 网格系统 ?...当然按道理 4*4 网格系统应该生成 16 个单元格,但是因为我们有格子合并,所以一般来说格子小于或等于网格系统应该生成个数。这里我们单元格是 11 个,如下图: ?...首先是我们 HTML 元素,11 个 grid item: .function-list .function-item * 11 接下来就是我们重点 CSS 布局了,代码如下: .function-list

    1K10

    如何使用 CSS Grid 布局 IOS11控制中心

    本文作者:IMWeb 结一 原文出处:IMWeb社区 未经同意,禁止转载 昨天 IOS11 就可以开始安装更新了,下图就是它带来控制中心界面,是不是有点像带圆角 Win10 风格?...设计拆分网格 我们先来根据效果图拆格子,如下图,红线表示水平线,白线表示垂直线,这样就构成了我们 4*4 网格系统 当然按道理 4*4 网格系统应该生成 16 个单元格,但是因为我们有格子合并,...这里我们单元格是 11 个,如下图: Grid 布局 拆分完了,我们就正式开始写代码。...首先是我们 HTML 元素,11 个 grid item: .function-list .function-item * 11 接下来就是我们重点 CSS 布局了,代码如下: .function-list...nth-of-type(5) { grid-column: 3 / 4; grid-row: 2 / 4; } 最终效果如下图(尺寸大小方面不一致,但思想大概如是): 附赠:在线 DEMO PS:感觉以后控制中心都是要走上这种网格风格了

    1.5K60

    js、jQuery 获取文档、窗口、元素各种值

    基于两年开发经验,总结了 javascriptjQuery 获取窗口、文档、元素各种值 javascript: 文档:是整个document所有的内容 浏览器当前窗口文档body宽度: document.body.clientWidth...获取竖直滚动条到顶部垂直高度 (即网页被卷上去高度)(ie浏览器): document.documentElement.scrollTop; 获取水平滚动条到左边水平宽度 (即网页被卷左去宽度...)(其他浏览器): document.body.scrollLeft; 获取水平滚动条到左边水平宽度 (即网页被卷左去宽度)(ie浏览器): document.documentElement.scrollLeft...: 鼠标相对于页面左上角偏移 (其值会受滚动影响,相当于整个文档,整个页面的Y值) IE9之下并不支持这个属性 clientY: 鼠标相对于浏览器窗口左上角偏移...鉴于layerY和offsetY不同,要兼容使用二者要注意   1.触发事件元素一定要设置定位属性。

    14.1K32

    【Java 进阶篇】深入浅出:JQuery 事件绑定奇妙世界

    在前端世界里,事件是不可或缺一部分。用户点击、输入、滚动等行为都触发着各种事件,而如何在代码中捕捉并处理这些事件是每位前端开发者必须掌握技能之一。...JQuery 是一个快速、简洁 JavaScript 库,它简化了 HTML 文档遍历和操作、事件处理、动画等操作。而其中事件绑定机制是 JQuery 一大特色。 什么是事件绑定?...事件绑定是指在特定 HTML 元素上设置一个监听器,用于捕捉用户触发事件(比如点击、输入、鼠标移动等),并执行相应操作。在 JQuery 中,事件绑定通常使用 on 方法来完成。...窗口事件:resize(窗口大小改变)、scroll(滚动滚动)等。 这只是其中一小部分,实际上 JQuery 提供了丰富事件类型,以满足不同场景需求。...让我们通过一个例子演示如何使用这个方法: <!

    18110

    前端工程师面试题汇总

    用到了CSS那些属性? 什么是响应式设计?响应式设计基本原理是什么?如何兼容低版本IE? 视差滚动效果,如何给每页做不同动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)...jquery如何将数组转化为json字符串,然后再转化回来? jQuery和Zepto区别?各自使用场景? 针对 jQuery 优化方法? Zepto点透问题如何解决?...jQuery slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后反复执行,该如何处理呢?...(名称、版本号,依赖) 每个模块代码结构都应该比较简单,且每个模块之间关系也应该非常清晰,随着功能和迭代次数越来越多,你会如何去保持这个状态?...答案是通过探测鼠标移动方向和轨迹,具体查看Khan Academy工程师 Ben Kamens 写 jQuery插件 文档推荐 jQuery 基本原理 JavaScript 秘密花园 CSS参考手册

    2K80

    医疗数字阅片-医学影像-Lodash 是一个一致性、模块化、高性能 JavaScript 实用工具库。_.throttle(func, , [option

    例子 // 避免在滚动时过分更新定位 jQuery(window).on('scroll', _.throttle(updatePosition, 100)); // 点击后就调用 `renewToken...看下滚动事件例子: 当使用触控板,滚动滚轮,或者拖拽滚动时候,一秒可以轻松触发30次事件。经我测试,在智能手机上,慢慢滚动一下,一秒可以触发事件100次之多。...电梯延迟了改变楼层功能,但是优化了资源。 在顶部按钮上点击或移动鼠标试一下: 你可以看到连续快速事件是如何被一个 debounce 事件替代。...如何使用 debounce 和 throttle 以及常见坑 自己造一个 debounce / throttle 轮子看起来多么诱人,或者随便找个博文复制过来。...根据经验,如果 JavaScript 方法需要绘制或者直接改变属性,我会选择 requestAnimationFrame,只要涉及到重新计算元素位置,就可以使用它。

    2.4K20

    前端面试那些坑

    margin和padding分别适合什么场景使用? 抽离样式模块怎么写,说出思路,有无实践经验?[阿里航旅面试题] 元素竖向百分比设定是相对于容器高度吗? 全屏滚动原理是什么?...用到了CSS那些属性? 什么是响应式设计?响应式设计基本原理是什么?如何兼容低版本IE? 视差滚动效果,如何给每页做不同动画?(回到顶部,向下滑动要再次出现,和只出现一次分别怎么做?)...jquery如何将数组转化为json字符串,然后再转化回来? jQuery和Zepto区别?各自使用场景? 针对 jQuery 优化方法? Zepto点透问题如何解决?...jQuery slideUp动画 ,如果目标元素是被外部事件驱动, 当鼠标快速地连续触发外部元素事件, 动画会滞后反复执行,该如何处理呢?...(名称、版本号,依赖) 每个模块代码结构都应该比较简单,且每个模块之间关系也应该非常清晰,随着功能和迭代次数越来越多,你会如何去保持这个状态

    2.1K60

    前端机试面试题

    2、使用CSS+DIV实现页面布局,页面居中,文字颜色效果要求一致。40分 3、鼠标悬停时动画效果。10分 4、“进入查看”标签与样式。...10分 5、定义一个javascript数组,数组中存放6个对象,每个对象描述服装名称,价格,图片信息。10分 6、使用angular将数组中数据动态展示在页面中。...、jQuery、AJAX、AngularJS、Bootstrap、响应式布局等前端开发技术; 3、擅长基于Node.JS、Express、MongoDB NoSQL数据库分布式后台开发技术; 4、具备良好面向对象编程经验...,前端AJAX调用 “潮牌大赏”子栏目要求实现延迟加载,滚动纵向滚动条时加载,参考瀑布流布局,我博客中有  要求兼容IE8+、Chrome、Firefox主流浏览器 素材请自行抓取,前端内容不得与原站雷同...PC Web类似 要求兼容各种手机分辨率 3、使用前端MVC 重构前端JavaScript脚本,使用前端MVC框架如(Angular,Vue,React等) 素材下载:点击下载 完整页面如下: ?

    4.9K40
    领券