鼠标滚轮事件，解决兼容浏览器

最新推荐文章于 2022-05-12 19:58:19 发布

快乐的小青蛙。

最新推荐文章于 2022-05-12 19:58:19 发布

阅读量243

点赞数

文章标签： css3 javascript css

本文链接：https://blog.csdn.net/weixin_46002223/article/details/123163661

版权

鼠标滚轮事件，解决兼容浏览器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #box1 {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        var box1 = document.getElementById('box1')

        box1.onmousewheel = function (event) {
          event = event || window.event

          // wheelDelta火狐中不支持
          // detail火狐中支持
          if (event.wheelDelta > 0 || event.detail < 0) {
            box1.style.height = box1.clientHeight - 10 + 'px'
          } else {
            box1.style.height = box1.clientHeight + 10 + 'px'
          }
          // 使用addEventListener()方法绑定的响应函数,取消默认行为不能使用return false
          // 需要使用event来取消
          event.preventDefault && event.preventDefault()

          // 当滚轮滚动的时候,如果浏览器有滚动条,滚动条会随之滚动
          // 这是浏览器的默认行为,如果不希望发生,则可以取消默认行为
          return false
        }

        // 为火狐绑定滚轮事件
        bind(box1, 'DOMMouseScroll', box1.onmousewheel)

        // 兼容浏览器多个事件绑定方式

        /*
      obj 要绑定的事件对象
      eventStr  事件的字符串（不要on）
      callback
    */

        function bind(obj, eventStr, callback) {
          if (obj.addEventListener) {
            // 大部分浏览器兼容方式
            obj.addEventListener(eventStr, callback, false)
          } else {
            // IE8及以下
            obj.attachEvent('on' + eventStr, function () {
              // 因为浏览器不同，在ie8中this指向为window，需要改变this的指向
              callback.call(obj)
            })
          }
        }
      }
    </script>
  </head>
  <body>
    <div id="box1"></div>
  </body>
</html>

快乐的小青蛙。

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
鼠标滚轮事件，解决兼容浏览器

鼠标滚轮事件，解决兼容浏览器<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /&g
复制链接

扫一扫