水平 iScroll 不能垂直滚动？答案

【问题标题】：Horizontal iScroll can't scroll vertical?水平 iScroll 不能垂直滚动？
【发布时间】：2011-11-24 07:26:23
【问题描述】：

我已经下载了 iScroll，我正在使用水平滚动。效果很好，只是如果内容和“水平滚动div”比设备屏幕长，您无法向下滚动以查看水平滚动下方的内容。我该如何解决？

下载自：http://cubiq.org/iscroll 使用代码：examples/horizontal-scroll

【问题讨论】：

您是否将 hScrollbar 和 vScrollbar 都设置为 true？
是的！您可以在此处查看示例：bristolhotel.com/pizzeria/mobil/pizza.php 但当然您不会在计算机上看到问题。
你有没有解决过这个问题，遇到同样的问题？
@HaggleLad 你有没有得到答案？我也面临同样的问题。
是的，刚刚添加了一个答案

标签： javascript ios scroll

【解决方案1】：

我必须自定义 iScroll.js 才能完成这项工作。这是我所做的更改

（请注意这些行号参考 iScroll v4.1.9）

第 100 行：onBeforeScrollStart: function (e) { e.preventDefault(); },

更改为：onBeforeScrollStart: function (e) { /* e.preventDefault(); */ },

第 106 行：onTouchEnd: null,

更改为：onTouchEnd: function (e) { e.preventDefault(); },

第 390 行：timestamp = e.timeStamp || Date.now();

在下面插入：if( Math.sqrt( deltaX*deltaX ) > 5 ) { e.preventDefault(); }

除此之外，为了让滚动条出现在我想要的位置，我还必须进行以下更改：

第 218 行：else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');

更改为：else bar.style.cssText = 'position:relative;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:7px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');

希望这会有所帮助！

【讨论】：

【解决方案2】：

如果您使用的是 iScroll 4，可以通过在初始化时将 onScrollStart 设置为 null 来解决此问题。

例子：

var scroller = new iScroll('wrapper', { onBeforeScrollStart: null });

【讨论】：

这适用于几次水平滑动。尝试水平滑动大约 10 次（在 iPhone 上）= 它变得迟钝。

【解决方案3】：

这是解决方案（来自http://gist.github.com/hotmeteor/2231984）：

var point, pointStartX, pointStartY, deltaX, deltaY;
var scroller = new iScroll('scrollerId', {
    vScroll: false,
    vScrollbar: false,
    hScrollbar: false,
    snap: 'li',
    momentum: false,
    onBeforeScrollStart: function(e) {
        point = e.touches[0];
        pointStartX = point.pageX;
        pointStartY = point.pageY;
        null;
    },
    onBeforeScrollMove: function(e) {
        deltaX = Math.abs(point.pageX - pointStartX);
        deltaY = Math.abs(point.pageY - pointStartY);
        if (deltaX >= deltaY) {
            e.preventDefault();
        } else {
            null;
        }
    }
});

遗憾的是，您不能依赖 iScroll 的内部 absDistX 和 absDistY，因为（无论出于何种原因）它们更新得太晚了。

【讨论】：