滚轮事件监听

最新推荐文章于 2021-12-07 18:55:05 发布
最新推荐文章于 2021-12-07 18:55:05 发布
阅读量3.6k 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44556271/article/details/86745870
版权

今天主要说的是鼠标滚轮事件，原理就是监听鼠标滚轮事件，冒泡、获取后就可以达到在网页上鼠标滚轮来向上向下查看网页内容，所以这时就需要用到鼠标滚轮事件，在众多的浏览器中火狐浏览器是比较特别的，它需要另外给它添加一个火狐的鼠标滚轮事件，而且是写在onload事件中，那么监听需要的代码量也不是很多，词汇也用得不多，我就直接给代码了

如图：
在这里插入图片描述

这个是滚轮事件的一个调用和函数，通过判断是IE&chrome就用wheeldelta来判断，而用fixfox的就用到detail来判断。在这过程中还要获取到内容区域的id名称，再来判断向上或者向下滚动方向就可以了。在if else中还用到了三目运算这样更有效率。

那还需要放上在onload事件中的火狐滚轮监听事件

  ![在这里插入图片描述](https://img-blog.csdnimg.cn/20190201224223494.PNG)

addEventListener这个是指向指定元素添加事件，DOMMouseScroll这个就是鼠标滚轮事件。

滚轮事件就讲到这。

**

瞭望select
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
监听滚轮事件
12-28
监听滚轮事件: $(document).ready(function(){ // javascript行为层 var bannerH=$(".div_last").offset().top; 获取指定元素到容器最顶部的高度 $(window).scroll(function(){ // 当页面滚动条变化时，执行的...
jquery监听鼠标滚轮事件+js监听滚轮事件
03-30
jquery监听鼠标滚轮事件+js监听滚轮事件， 两个例子，都可以通过！ 目前已测试 ie8 火狐，360
JS监听鼠标滑轮事件
ydZ157的博客
12-07 7546
上才艺 var box = document.getElementById('box'); function onMouseWheel(ev) { var ev = ev || window.event; var down = true; down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0; if (down) { console.log('鼠标滚轮向下---------') } else { conso..
html鼠标滚轮监听,javascript监听鼠标滚轮事件浅析
weixin_35374026的博客
06-04 1240
我们都见到过这些效果，用鼠标滚轮实现某个表单内的数字增加减少操作，或者滚轮控制某个按钮的左右，上下滚动。这些都是通过js对鼠标滚轮的事件监听来实现的。今天这里介绍的是一点简单的js对于鼠标滚轮事件的监听。不同浏览器不同的事件首先，不同的浏览器有不同的滚轮事件。主要是有两种，onmousewheel(firefox不支持)和DOMMouseScroll(只有firefox支持)，关于这两个事件这里不...
在vue项目中监听鼠标滚动事件（mousewheel）
yangyi
08-31 2万+
在vue项目中使用elementui做一个竖屏走马灯效果，carousel组件有点击事件，并没有明确的鼠标滚轮事件，希望做一个鼠标前后滚动也可以切换走马灯，当没有滚动跳出现时，通过监听scroll将无作用。 1、走马灯的上下页点击切换 setActiveItem(index) { //index为走马灯当前页码 let nextIndex = index ++; this.$refs.carousel.setActiveItem(nextIndex) }, 2、走马灯的上下页鼠.
JavaScript监听鼠标与滚轮事件
芋泥啵啵月亮的博客
07-23 2934
鼠标事件 click：在用户单击主鼠标按键或者按下回车键时触发。 dblclick：在用户双击主鼠标按键时触发。 mousedown：任意鼠标按键按下时触发。 mouseenter：鼠标光标首次进入元素内部时触发 mouseleave：位于元素上方的鼠标光标移动到元素范围之外时触发。 mousemove：当鼠标在元素内部移动时重复触发。 mouseup：用户释放鼠标按键时触发。 mouseover mouseout ...
JS监听鼠标滚轮事件（兼容IE8）
qq_43142990的博客
12-16 1378
一.用法： 调用addScrollListener()，传入要监听的对象 在scrollHandle() 中编写相应处理函数 二.代码： // 为某个对象添加滚动监听事件(传入要监听的对象) function addScrollListener(obj) { if (obj.addEventListener) { // Firefox obj.addEventListener('DOMMouseScroll', wheel, false) } // IE/Chrome/Ope
两种js监听滚轮事件的实现方法
11-23
本文将详细介绍两种JavaScript监听滚轮事件的实现方法：原生JavaScript和jQuery。 首先，我们来看第一种方法，使用原生JavaScript的`window.onscroll`事件监听器： ```javascript window.onscroll = function() { ...
javascript监听鼠标滚轮事件浅析
10-25
主要介绍了javascript监听鼠标滚轮事件浅析,使用具体例子说明,同时考虑了不同的浏览器,需要的朋友可以参考下
javascript 鼠标滚轮事件
10-30
由于鼠标滚轮事件在 IE 和 FF 的实现有点不一样，所以有需要把这个写成一个统一可用的事件。
html鼠标滚轮监听,js中鼠标滚轮事件详解(firefox多浏览器)
weixin_36356002的博客
06-04 296
附加事件其中经我测试，IE/Opera属于同一类型，使用attachEvent即可添加滚轮事件。/*IE注册事件*/if(document.attachEvent){document.attachEvent('onmousewheel',scrollFunc);}Firefox使用addEventListener添加滚轮事件/*Firefox注册事件*/if(document.addEventLi...
js监听html页面的上下滚动事件
热门推荐
阿亮
06-28 5万+
最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：不多说了，直接上代码了，经过测试可以使用：<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Dome</title> <sc
使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法
x先生的博客
07-18 7953
使用JS监听鼠标滚轮事件，并且滑动一次只执行一次事件方法function autoRoll() { $(document).on("mousewheel DOMMouseScroll", function(e) { var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta >
如何判断鼠标滚轮在动以及滚动方向
快乐向日葵
01-14 1588
&lt;html&gt;&lt;head&gt;&lt;script type="text/javascript"&gt;function handle(delta) {    var s = delta + ": ";    if (delta &lt;0)        s += "您在向下滚……";    else        s += "您在向上滚……";   
监听鼠标滚轮的滚动， 判断方向。
wanzx666的博客
08-13 1006
DOMMouseScroll //判断网页是否向上向下滚动 function mouse_scroll() { //兼容完整处理 通过浏览器判断 var browser = window.navigator.userAgent .toLowerCase() .indexOf("firefox"); if (browser != -1) { //处理火狐滚轮事件
java 鼠标滚轮监听事件_监听PC/移动端，鼠标滑动，滚轮，手指滑动事件
weixin_35639680的博客
02-28 586
在jQuery开发环境下：1.滚轮事件:(需要监听mousewheel DOMMouseScroll)//代码 只是我拷贝的 代码片段$(document).on("mousewheel DOMMouseScroll", function(e){console.log('mousewheel');if(_this.switch){_this.switch = false;var delta = (...
滚动条监听事件
心若向阳 无谓悲伤
06-28 1万+
需求： 实现当滚动条滚动到某一位置时，出现“一建回顶部”的按钮及相关事件功能，默认不显示“一建回顶部” 分步骤实现： 1、简易布局及样式 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title&
js监听鼠标滚动事件
first_shun的博客
07-20 4888
js中监听鼠标滚动事件，事件的名称是“mousewheel”，按正常的事件绑定即可，其中有两点关于firefox浏览器的需要注意： 1、firefox浏览器的事件名称是“DOMMouseScroll” 2、firefox的滑动值和正常的相反的 <!DOCTYPE html> <html class="no-js"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Comp
js 监听鼠标滚轮事件
最新发布
05-24
在JavaScript中，可以使用`addEventListener`方法来监听鼠标滚轮事件。 具体实现方法如下： ```javascript // 获取需要监听滚轮事件的元素 var element = document.getElementById("elementId"); // 添加滚轮事件...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值