与原生滚动iScroll在一个轴上 [英] iScroll with native scrolling on one axis

问题描述

我现在用的是最美妙的JavaScript工具iScroll4 http://cubiq.org/iscroll-4 在移动网站iOS和Android。这里是我的布局是这样的：

I am using the most wonderful javascript tool iScroll4 http://cubiq.org/iscroll-4 on a mobile website for iOS and Android. Here is what my layout looks like:

的水平滚动区域能够被利用iScroll4的，使用以下设置：

The horizontally scroll-able area is making use of iScroll4 with the following settings:

   var myScroll = new iScroll('frame',  { hScrollbar: false, vScrollbar: false, vScroll: false })

水平滚动部分的伟大工程。这个问题是当用户试图向上或向下滚动页面将他们的手指在水平滚动区域会发生什么。所以，我需要本地垂直滚动，并且在同一地区iScroll水平滚动。

The horizontal scrolling part works great. This issue is what happens when a user attempts to scroll up or down the page placing their finger on the horizontal scrolling area. So I need native vertical scrolling, and iScroll horizontal scrolling on the same area.

我已经试过到目前为止： 取出即preventDefault（）在iScroll code（允许本地滚动，但在两轴）。 删除ËpreventDefault（），然后禁用水平滚动页面宽，这样的：

What I have tried so far: Removing e.preventDefault() in the iScroll code (allows for native scrolling, but in BOTH axes). Removing e.preventDefault() and then disabling horizontal scrolling page wide with this:

var touchMove;

document.ontouchstart = function(e){
    touchMove = e.touches[0];
}

document.ontouchmove = function(e){
    var theTouch = e.touches[0] || e.changedTouches[0];
    var Xer      = rs(touchMove.pageX - theTouch.pageX).toPos();
    var Yer      = rs(touchMove.pageY - theTouch.pageY).toPos();        
    touchMove    = theTouch;
    if(Yer > Xer){ e.preventDefault(); }
}

这似乎什么也不做。我怎么能允许在水平滚动区域本土垂直滚动，没有松动iScroll的水平滚动？我真的在这里难住了。先谢谢了。

which seems to do nothing. How can I allow for native vertical scrolling in the horizontal scrolling area, without loosing the horizontal scrolling of iScroll? I am really stumped here. Thanks in advance.

（只是备案RS（富）.toPos（）是一个函数，使得它的价值foo的正数无关）。

(just for the record rs(foo).toPos() is a function that makes foo a positive number regardless of its value).

推荐答案

建议修改为@ Lukx的优秀的解决方案。 iScroll4的新版本放置在 onBeforeScrollMove 的即preventDefault（）可覆盖。通过将挡，如果这个选项，默认是不pvented垂直滚动$ P $和垂直可以本地滚动。

Suggested edit to @Lukx's excellent solution. New versions of iScroll4 place the e.preventDefault() in onBeforeScrollMove which can be overridden. By placing the if block into this option, default is not prevented for vertical scrolling, and vertical can scroll natively.

myScroll = new iScroll('scrollpanel', {
    // other options go here...
    vScroll: false,
    onBeforeScrollStart: function ( e ) {
        if ( this.absDistX > (this.absDistY + 5 ) ) {
            // user is scrolling the x axis, so prevent the browsers' native scrolling
            e.preventDefault();
        }
    },
});

这篇关于与原生滚动iScroll在一个轴上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！