javascript - IOS滚动站点修复

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 事件可能来得太快。