u011137984
秦时明月ff
2017-04-29 07:45
采纳率: 100%
浏览 3.3k

如何在触发鼠标滚轮事件结束执行一个事件?

本来想写一个整屏切换的效果,一开始用的button代替鼠标滚轮,最后替换成滚轮时才发现,滚动一次能切换好多屏.有没有办法阻止呢?就是不管鼠标滚轮滚动多少.都当成一次处理.或者有没有滚轮结束触发某个事件呢?

 <!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .container {
            position: relative;
            border: 1px solid #000000;
            margin: 0 auto;
            background: red;
        }

        .container ul {
            position: absolute;
        }
        .container li {
            width: 1000px;
            height: 500px;
            background: blue;
        }
        .container li:nth-child(1) {
            background-color: red;
        }
        .container li:nth-child(2) {
            background-color: black;
        }
        .container li:nth-child(3) {
            background-color: yellow;
        }
        .container li:nth-child(4) {
            background-color: deeppink;
        }
        ::-webkit-scrollbar {
            width: 0px;
        }
    </style>
</head>
<body>
<div class="container">
    <ul>
        <li>111111111111</li>
        <li>2222222222222</li>
        <li>3333333333333</li>
        <li>4444444444444</li>
    </ul>
</div>
<script>
    $(function () {
        var mW = $(window).width();
        var mH = $(window).height();
        var NmH = 0;
        $("ul li").css({
            "width": mW,
            "height": mH
        });
        $(document.body).css({
            "overflow-x": "hidden",
            "overflow-y": "hidden"
        });
        document.onmousewheel = function (e) {
            e = e || window.event;
            var wheel = e.wheelDelta;
            if (wheel > 0) {
                if (NmH <= 0) {
                    return false
                }
                else {
                    NmH -= mH;//向上滑动触发
                    $('.container ul').stop().animate({
                        "top": -NmH
                    }, 1000);
                }
            }
            else {
                if (NmH >= mH * ($(".container ul li").length - 1)) {
                    return false
                }
                else {
                    NmH += mH;//向下滑动触发
                    $('.container ul').stop().animate({
                        "top": -NmH
                    }, 1000);
                }
            }
        };
    })
</script>
</body>
</html>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

2条回答 默认 最新

  • fight_in_dl
    战在春秋 2017-04-29 08:49
    已采纳

    如果250ms没有滚动,视为一次滚动结束。

    代码如下,

    $("#myElem").mousewheel(function() {
      clearTimeout($.data(this, 'timer'));
      $.data(this, 'timer', setTimeout(function() {
         alert("Haven't scrolled in 250ms!");
         //在这加入其它逻辑
      }, 250));
    });
    
    点赞 评论
  • ljheee
    ljheee 2017-04-29 09:35

    html没有标签支持 滚动结束触发事件,可以自己添加计时器

    点赞 评论

相关推荐