【发布时间】：2012-11-21 05:56:08
【问题描述】：
我之前有一个基于 HTML5 画布的应用程序，我最近转换为使用 Kinetic JS。我能够通过简单地在包含的 div 上使用 overflow: auto 在桌面浏览器和 IOS 中启用滚动。由于转换为使用 Kinetic 滚动不再适用于移动/iPad 设备。
我尝试了几种不同的方法来解决这个问题，尽管我有点卡住了。首先，我尝试使用 touchscroll，但由于各种原因这对我不起作用（尽管库导致其他问题，但事情确实滚动了）。接下来，我尝试将 -webkit-overflow-scrolling: touch 选项添加到我的 div 样式中，尽管这似乎没有任何效果。
是否有滚动大于可视区域/div 的 Kinetic JS 画布的标准方法？
这是一个例子。如果您在 IOS 设备（iPad、iPhone 等）上查看示例，您会注意到顶部画布不会在 div 内滚动，而底部画布会滚动。
http://jsfiddle.net/blueshirts/uERVq/26/
<!-- KineticJS canvase, won't scroll on IOS devices. -->
<div id="container" style="overflow: auto; width: 400px; height: 400px; background- color: gray">
</div>
<br/>
<!-- Vanilla HTML5 Canvas, does scroll on IOS devices. -->
<div id="canvasContainer"
style="width: 400px; height: 400px; overflow: auto; background-color: red">
<canvas id="vanillaCanvas"
width="800" height="600">
</canvas>
</div>
// Create a stage instance that is larger than its parent div.
var stage = new Kinetic.Stage({
container: 'container',
width: 800,
height: 600
});
// Create a layer.
var layer = new Kinetic.Layer();
// Add some text...
var text = new Kinetic.Text({
text: "KineticJS generated Canvas that won't scroll to IOS touches...",
x: 0,
y: 0,
fontSize: 12,
fontFamily: 'Calibri',
textFill: 'Black'
});
layer.add(text);
// Add a rectangle to the layer so you can see if the content scrolls.
var rect = new Kinetic.Rect({
x: 50,
y: 50,
width: 200,
height: 100,
fill: "yellow",
stroke: "black",
strokeWidth: 7
});
layer.add(rect);
// Add the layer to the stage.
stage.add(layer);
// Create a "vanilla" canvas instance and draw the same rectangle on it.
var canvas = document.getElementById('vanillaCanvas');
var context = canvas.getContext('2d');
context.beginPath();
context.rect(50, 50, 200, 100);
context.fillStyle = 'yellow';
context.fill();
context.lineWidth = 7;
context.strokeStyle = 'black';
context.stroke();
编辑：
可能是错误的，但在我看来，这个问题是由 Kinetic 在 Stage 类中注册 touchmove 事件（和其他事件）引起的。在它运行的处理程序中， preventDefault 似乎阻止移动浏览器执行其默认滚动行为。如果“我”已经注册了 touchmove 事件，这可能是可取的。如果 Kinetic 没有注册和处理我不感兴趣的事件，那就太好了。
_touchmove: function(evt) {
this._setUserPosition(evt);
var dd = Kinetic.DD;
evt.preventDefault();
我可以在这里演示这个问题：http://jsfiddle.net/blueshirts/P9RaT/28/
【问题讨论】：