Question

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

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

Answer 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');

希望这有帮助！

Answer 2

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

示例：

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

Answer 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，因为（无论出于何种原因），它们更新得太晚了。

水平iScroll无法滚动垂直？

3 个答案: