js监听html页面的上下滚动事件方法

2024-12-22 23:19:28

最近在一个项目中，在写前端页面的时候，想像以前做Android时在页面时刻监听上下滚动的事件，查找资料发现由鼠标或类似用户动作触发的事件有以下图示：

不多说了，直接上代码了，经过测试可以使用：

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>Dome</title>
  <script type="text/javascript"> 

   function scroll(){
    //console.log("打印log日志");实时看下效果
    console.log("开始滚动！");
   }

   var scrollFunc = function (e) {
    e = e || window.event;
    if (e.wheelDelta) { //第一步：先判断浏览器IE，谷歌滑轮事件
     if (e.wheelDelta > 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
     }
     if (e.wheelDelta < 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
     }
    } else if (e.detail) { //Firefox滑轮事件
     if (e.detail> 0) { //当滑轮向上滚动时
      console.log("滑轮向上滚动");
     }
     if (e.detail< 0) { //当滑轮向下滚动时
      console.log("滑轮向下滚动");
     }
    }
   }
   //给页面绑定滑轮滚动事件
   if (document.addEventListener) {//firefox
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
   }
   //滚动滑轮触发scrollFunc方法 //ie 谷歌
   window.onmousewheel = document.onmousewheel = scrollFunc;

  </script> 

 </head>
 <body onscroll="scroll()">
  <div style="height: 2000px;background-color: aqua;"></div>
 </body>
</html>

如果有没有使用过console.log(“”)的，我这里截下图看下吧（谷歌浏览器）：

以上这篇js监听html页面的上下滚动事件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

关于JavaScript与HTML的交互事件

JavaScript和HTML的交互是通过事件实现的.JavaScript采用异步事件驱动编程模型,当文档.浏览器.元素或与之相关对象发生特定事情时,浏览器会产生事件.如果JavaScript关注特定类型事件,那么它可以注册当这类事件发生时要调用的句柄. 事件流事件流描述的是从页面中接收事件的顺序,比如有两个嵌套的div,点击了内层的div,这时候是内层的div先出发click事件还是外层先触发?目前主要有三种模型 IE的事件冒泡:事件开始时由最具体的元素接收,然后逐级向上传播到较为不具体的元
JavaScript常见鼠标事件与用法分析

本文实例讲述了JavaScript常见鼠标事件与用法.分享给大家供大家参考,具体如下: JavaScript 鼠标事件有以下8种 mousedown 鼠标的键钮被按下. mouseup 鼠标的键钮释放弹起. click 鼠标左键(或中键)被单击. 事件触发顺序是:mousedown -> mouseup -> click dblclick 鼠标左键(或中键)被双击. 事件触发顺序是:mousedown -> mouseup -> click -> mousedown ->
js捕捉键盘事件和按键键值的方法

如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Co
关于js中的鼠标事件总结

js中鼠标事件主要有onclick,onmousedown,onmouseup,oncontextmenu,ondblclick,所有的这些事件都包含有一个事件对象event,当然在IE低版本下,event对象是挂在window底下的.这个我们另行讨论. 1.通过html添加事件 <input type="button" click="alert(1)"/> 2.通过DOM0级方式添加事件 <input type="button"
javascript 键盘事件总结推荐

在form中, submit的快捷键是 enter,reset的快捷键是 esc.不过在IE6,safari4,ff3.5,opera10,chrome中,按Enter,不但激发form的submit事件,同时也会激发提交按钮的onclick,激发顺序为提交按钮的 onclick → form 的 onsubmit. 键盘事件键盘事件 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行] 不过并不止提交按钮会激发form的submit事件,连同上面的归纳如下: 1. 如果表单里有一个ty
js监听键盘事件示例代码

复制代码代码如下: <script type="text/javascript" language=JavaScript charset="UTF-8"> var isPiss=0; document.onkeydown=function(event){ var e = event || window.event || arguments.callee.caller.arguments[0]; if(e && e.keyCode==27
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例

本文实例讲述了JavaScript(js)处理的HTML事件.键盘事件.鼠标事件.分享给大家供大家参考,具体如下: 示例代码: HTML文件: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML文件</title> <script> window.οnlοad=function () {
JS html事件冒泡和事件捕获操作示例

本文实例讲述了JS html事件冒泡和事件捕获操作.分享给大家供大家参考,具体如下: 今天学习了事件冒泡和捕获,记录一下. 1.冒泡型事件:事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发. 我一般用法就是理解为触发事件A, 会触发A的父亲,爷爷,爷爷的父亲...... 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>
js和jquery实现监听键盘事件示例代码

项目中要监听键盘组合键CTRL+C,以便做出对应的响应.查了一些方法但是其兼容性和稳定性不是很高,最终得到如下方法,经测试在Firfox.Chrome.IE中均可以使用. 一.使用javascript实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function keyListener(e
JS检测页面中哪个HTML标签触发点击事件的方法

本文实例讲述了JS检测页面中哪个HTML标签触发点击事件的方法.分享给大家供大家参考,具体如下: 在html标签中,为了页面显示的美观,会在标签中相互嵌套,在做"效果"的时候就难免不了的添加各种事件,例如: <a href=""><span onclick="">dddd</span></a> 当用户点击的时候,想确定是链接产生的事件还是span标签onclick标签产生的事件,这个有时候是很有必要
js 动态生成html 触发事件传参字符转义的实例

通常,在使用 JS 动态生成 html 的过程中,会嵌入相应的样式.事件等属性元素,而这时经常会出现所谓的 "单.双引号不够用" 的情况,别急,这时可以利用 html 语言中的转义字符来解决. 下面就来介绍一下相应的转义字符吧: & -- (ampersand) 转义字符对应为 & " -- (double quote) 双引号,转义字符对应为 " ' -- (single quote)单引号,转义字符对应为 ' < -- (l
javascript 鼠标事件总结

常见的有以下8个: mousedown:鼠标的键钮被按下. mouseup:鼠标的键钮被释放弹起. click:单击鼠标的键钮. dblclick:鼠标的键钮被按下. contextmenu :弹出右键菜单. mouseover:鼠标移到目标的上方. mouseout:鼠标移出目标的上方. mousemove:鼠标在目标的上方移动. mousedown事件与mouseup事件可以说click事件在时间上的细分,顺序是mousedown => mouseup => click.因此一个点击事件,

js监听html页面的上下滚动事件方法

相关推荐

随机推荐