Question

我想为IOS制作一个视差滚动网站，有没有人知道如何“冻结”屏幕以允许设备识别/对div中的滚动作出反应？

基本上需要这样的东西 - http://jsfiddle.net/9R4hZ/40/才能在Ipad上工作，而滚动时视口不会移动到整个商店..

干杯保罗

Answer 1

您可以在视口div上侦听touchmove事件，防止标准滚动行为，并欺骗按键或滚轮事件（例如，使用jQuery的.trigger方法）。这样您就可以在添加触摸事件时保留当前的滚动功能。

为了获得“滚动”的方向，您可以从以下内容开始：

var lastTouch;
var scrollDirection;
var viewPort = document.getElementById("view");

viewPort.addEventListener('touchmove', function(event) {

    event.preventDefault();

    if (lastTouch < event.targetTouches[0].pageY) {
        console.log("dragging down");
        scrollDirection = "up";
        //trigger up arrow keypress?

    }
    else if (lastTouch > event.targetTouches[0].pageY) {
        console.log("dragging up");
        scrollDirection = "down";
        //trigger down arrow keypress?          
    }

    lastTouch = event.targetTouches[0].pageY;
});

您可能需要对触发滚动事件触发器的频率进行一些调整，因为touchmove事件可能会过快。

IOS滚动网站修复

1 个答案: