鼠标滚轮事件

除了 Firefox 之外所有浏览器都支持「mousewheel」事件，Firefox 使用「DOMMouseScroll」取代「mousewheel」，在 3 级 DOM 事件规范中又定义了「wheel」事件作为 「mousewheel」 和 「DOMMouseScroll」的标准版本。

下面代码演示了如何处理鼠标滚轮事件：

/**
 * 把内容装入到一个指定大小的窗体或视口中
 * @param content
 * @param framewidth
 * @param frameheight
 * @param contentX
 * @param contentY
 */
function enclose(content, framewidth, frameheight, contentX, contentY) {
    framewidth = Math.max(framewidth, 50);
    frameheight = Math.max(frameheight, 50);
    contentX = Math.min(contentX, 0) || 0;
    contentY = Math.min(contentY, 0) || 0;
    
    // 初始化 frame 元素
    var frame = document.createElement("div");
    frame.className = "enclosure";
    frame.style.width = framewidth + "px";
    frame.style.height = frameheight + "px";
    frame.style.overflow = "hidden";
    frame.style.boxSizing = "border-box";  // border-box 简化了调整 frame 大小的计算
    frame.style.webkitBoxSizing = "border-box";
    frame.style.mozBoxSizing = "border-box";
    
    content.parentNode.insertBefore(frame, content);
    frame.appendChild(content);
    
    // 确定元素相对于 frame 的位置
    content.style.position = "relative";
    content.style.left = contentX + "px";
    content.style.top = contentY + "px";
    
    var isMacWebkit = (navigator.userAgent.indexOf("Macintosh") !== -1 && navigator.userAgent.indexOf("Webkit") !== -1);
    var isFirefox = (navigator.userAgent.indexOf("Gecko") !== -1);
    
    // 注册 mousewheel 事件处理程序
    frame.onwheel = wheelHandler;
    frame.onmousewheel = wheelHandler;
    if (isFirefox)
        frame.addEventListener("DOMMouseScroll", wheelHandler, false);
    
    function wheelHandler(event) {
        var e = event || window.event;
    
        var deltaX = e.deltaX * -30 || e.wheelDeltaX/4 || 0;
        var deltaY = e.deltaY * -30 || e.wheelDeltaY/4 || (e.wheelDeltaY === undefined && e.wheelDelta/4)
            || e.detail * -10 || 0;
    
        if (isMacWebkit) {
            deltaX /= 30;
            deltaY /= 30;
        }
    
        if (isFirefox && e.type !== "DOMMouseScroll")
            frame.removeEventListener("DOMMouseScroll", wheelHandler, false);
    
        var contentbox = content.getBoundingClientRect();
        var contentwidth = contentbox.right - contentbox.left;
        var contentheight = contentbox.bottom - contentbox.top;
    
        if (e.altKey) {
            if (deltaX) {
                framewidth -= deltaX;
                framewidth = Math.min(framewidth, contentwidth);
                framewidth = Math.max(framewidth, 50);
                frame.style.width = framewidth + "px";
            }
            if (deltaY) {
                frameheight -= deltaY;
                frameheight = Math.min(frameheight, contentheight);
                frameheight = Math.max(frameheight, 50);
                frame.style.height = frameheight + "px";
            }
        } else {
            if (deltaX) {
                var minoffset = Math.min(framewidth - contentwidth, 0);
                contentX = Math.max(contentX + deltaX, minoffset);
                contentX = Math.min(contentX, 0);
                content.style.left = contentX + "px";
            }
            if (deltaY) {
                var minoffset = Math.min(frameheight - contentheight, 0);
                contentY = Math.max(contentY + deltaY, minoffset);
                contentY = Math.min(contentY, 0);
                content.style.top = contentY + "px";
            }
        }
    
        if (e.preventDefault)
            e.preventDefault();
        if (e.stopPropagation)
            e.stopPropagation();
        e.cancelBubble = true;
        e.returnValue = false;
        return false;
    }
}