Question

我正在使用iScroll 5滚动+缩放asp.net页面中的iframe。这是Demo

在FireFox中，它似乎在鼠标滚轮上冻结。在所有其他浏览器中它的工作很棒。知道为什么这个行为只在FF？

提前致谢，杰克

编辑：以下是相关网页的代码。

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Schematic Diagram</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<base target="_parent" href="PartSchematics3.aspx?id=<%= schematicID.ToString()%>" />
<script type="text/javascript" src="Common/iscroll-zoom.js"></script>

<script type="text/javascript">

var scroll;

function loaded() {
    scroll = new IScroll('#wrapper', {
        scrollbars: true,
        interactiveScrollbars: true,
        freeScroll: true,
        scrollX: true,
        scrollY: true,
        zoomMin: 0.37,
        zoomMax: 4,
        momentum: false,
        onBeforeScrollStart: null,
        zoom: true,
        mouseWheel: true,
        wheelAction: 'zoom'
    });
    scroll.zoom(0.37, 0, 0, 1000);
}

//disables browser mouse scrolling
if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', wheel, false);
}

function wheel(event) {
    event.preventDefault();
    event.returnValue = false;
}

window.onmousewheel = document.onmousewheel = wheel;
</script>

<style type="text/css">
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

html {
-ms-touch-action: none;
}

body {
font-size: 12px;
font-family: ubuntu, helvetica, arial;
padding:0px;
border-spacing:0px; 
background-image: none; 
margin: 0px; 
border: 0;
text-align: left;
overflow: hidden; 
}

#wrapper {
position: absolute;
z-index: 1;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
background: #ccc;
overflow: hidden;
}

#scroller {
position: absolute;
z-index: 1;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}

</style>
</head>
<body onload="loaded()">
<form id="form1" runat="server">
    <div id="wrapper">
        <div id="scroller">
            <asp:Literal ID="litSchematicImageMap" runat="server"></asp:Literal>
        </div>
    </div>
</form>
</body>
</html>

Answer 1

似乎是_wheelZoom函数中iScroll-zoom.js中的复制和粘贴错误：

wheelDeltaY = -e.detail / Math.abs(e.wheelDelta);

应该是

wheelDeltaY = -e.detail / Math.abs(e.detail);

iScroll 5缩放Firefox

1 个答案: