html监听整个页面滚动事件（监听用户是否正常访问）

蔚落 2023-05-29 11:49 21阅读 0赞

<!DOCTYPE html>
    <html>
     <head>
      <meta charset="utf-8" />
      <title>监听整个页面滚动事件</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>

发表评论取消回复

表情：

评论列表（有 0 条评论，21人围观）

还没有评论，来说两句吧...

相关阅读

相关 html监听整个页面滚动事件（监听用户是否正常访问）

<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>监

蔚落/ 2023年05月29日 11:49/ 0 赞/ 22 阅读

相关 js监听scrolltop_JS监听页面滚动到底部事件

Eclipse安装Spring-tool-suite 目录结构: // contents structure \[-\] 在Eclipse上安装Spring-tool-sui

分手后的思念是犯贱/ 2023年01月09日 01:12/ 0 赞/ 195 阅读

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

html代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8" />

柔情只为你懂/ 2022年12月21日 04:55/ 0 赞/ 464 阅读

相关 JS页面滚动监听

window.onscroll = function() { //scrollTop就是触发滚动时的高度 var scroll= docume

分手后的思念是犯贱/ 2022年12月02日 15:20/ 0 赞/ 183 阅读

相关 html热点新闻滚动,js监听html页面的上下滚动事件方法

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

ゝ一世哀愁。/ 2022年10月06日 10:57/ 0 赞/ 225 阅读

相关监听滚动条事件

滚动条事件可以监听整个页面也可以监听某一div或者iframe，举例： //监听整个窗口的滚动条 window.onscroll = function()

迈不过友情╰/ 2022年06月07日 23:18/ 0 赞/ 655 阅读

相关页面滚动监听事件

滚动监听事件一般网页中的返回顶部按钮都是通过滚动监听事件来实现的这个例子是当滚动条下拉到一定程度之后，某个元素中的所有内容都变成fixed ![4444][]

红太狼/ 2022年02月01日 02:51/ 0 赞/ 531 阅读

相关 React 监听页面滚动

const scrollEvent = event => { if (!event.srcElement.scrollTop) { //处理向

墨蓝/ 2021年11月16日 14:32/ 0 赞/ 895 阅读

相关 vue滚动事件监听

最近写了一个VUE的web app项目，需要实现某个部位吸顶的效果。即，页面往上滑动，刚好到达该部位时，该部分，固定在顶部显示。 1、监听滚动事件利用VUE写一个在控制台

逃离我推掉我的手/ 2021年09月17日 00:32/ 0 赞/ 538 阅读

相关 JS监听整个页面的回车事件

1. <script type="text/javascript"> 2. 3. document.οnkeydοwn=keyDownSearc

骑猪看日落/ 2021年06月24日 13:59/ 0 赞/ 481 阅读