mousewheel

对 mousewheel 事件做了浏览器兼容性处理

事件对象

event.mousewheel()
mousewheel( e )
滚轮事件
Parameters:
  • e.deltaY (Number) – 纵向滚动幅度,一般是正数表示向上滚动,负数表示向下滚动
  • e.deltaX (Number) – 横向滚动幅度,一般是正数表示向左滚动,负数表示向右滚动

示例

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>mousewheel compatibility</title>
<script src="//g.alicdn.com/kissy/k/1.4.7/seed.js" data-config="{combine:true}"></script>
<style type="text/css">
    body, html {
        margin: 0;
        padding: 0;
    }
</style>
</head>
<body>
<h1>mousewheel compatibility</h1>
<button id="detach">detach</button>
<div id='tt' style="width:500px;border: 1px solid red;height:100px;overflow: auto;">
    mousewheel on me
    <div style="height: 500px">

    </div>
</div>
<div id='t' style="width:500px;border: 1px solid red;">
</div>
<p style="color: red">
    note:<br/>
    not perfect on mac osx with accelerated scroll
</p>
<script>
    var S = KISSY;

    KISSY.use("dom,event", function(S, DOM, Event) {
        var t = DOM.get("#t");
        var tmpl = "<p>" +
                "wheelDelta:{wheelDelta}<br/>" +
                "axis:{axis}<br/>" +
                "wheelDeltaY:{wheelDeltaY}<br/>" +
                "wheelDeltaX:{wheelDeltaX}<br/>" +
                "detail:{detail}<br/>" +
                "delta:{delta}<br/>" +
                "deltaX:{deltaX}<br/>" +
                "deltaY:{deltaY}<br/>" +
                "</p>";
        var tt;
        Event.on('#tt', "mousewheel", tt = function(e) {

            DOM.html(t, S.substitute(tmpl, {
                wheelDelta:e.wheelDelta,
                axis:e.axis,
                wheelDeltaY:e.wheelDeltaY,
                wheelDeltaX:e.wheelDeltaX,
                detail:e.detail,
                delta:e.delta,
                deltaX:e.deltaX,
                deltaY:e.deltaY
            }));

            e.preventDefault();

        });

        Event.on("#detach", "click", function() {
            Event.remove(t, "mousewheel", tt);
        });


    });

</script>
</body>
</html>