Question

我已经在网上搜索了好几天了，还没找到解决问题的方法。我正在建立一个移动网站，在它上面会有一些元素可以通过在它们上面滑动来水平滚动。到目前为止，这个工作正常。

为防止页面在滑动时垂直滚动，我将event.preventDefault（）添加到touchmove事件中，这就是问题所在;我希望用户能够在垂直滑动此元素的同时滚动页面，但只有当他/她刷过它时，才能说60像素（垂直）。我怎样才能做到这一点？使用我使用的代码，执行“else”（当滚动长度超过70px时），但不会发生滚动。我想做什么甚至可能，在那种情况下怎么做？

以下是我尝试过的一些代码：

$(Carousel_Wrapper).bind('touchstart', function(event) 
{
    // Some other stuff happens here

    // Set last y-coord
    Carousel_LastPageY = event.originalEvent.touches[0].pageY;

    // Bind the touchmove event
    $(Carousel_Wrapper).bind('touchmove', function(event) 
    {
        // The function which scrolls the content of the element
        Carousel_Drag(event.originalEvent.touches[0].pageX, event);

        // Calculate the vertical swipe length
        var Carousel_VerticalSwipeLength = event.originalEvent.touches[0].pageY - Carousel_LastPageY;

        // Convert to a positive value
        if(Carousel_VerticalSwipeLength < 0)
        {
            Carousel_VerticalSwipeLength = Carousel_VerticalSwipeLength * -1;
        }

        // If the vertical scroll-length is less than 70px
        if(Carousel_VerticalSwipeLength < 70)
        {
            event.preventDefault();
        }

        // The scroll-length was more than 70px, resume scrolling
        else
        {
            // I've tried this:
            return true;

            // Then this:
            $(Carousel_Wrapper).unbind('touchmove');

            // And at last this:
            $(Carousel_Wrapper).unbind('touchmove');
            $(Carousel_Wrapper).trigger('touchmove');
        }
    });
});

感谢任何帮助！

谢谢，亨利克

Answer 1

您的变量应存储触摸差异的总和。您的变量看起来只是查看每个差异的数量，而不是它们的总和。

暂时禁用touchmove（移动）上的滚动

1 个答案: