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

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

下载自:http://cubiq.org/iscroll 使用代码:examples/horizo​​ntal-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 的内部 absDistXabsDistY,因为(无论出于何种原因)它们更新得太晚了。

    【讨论】:

      猜你喜欢
      • 2013-05-22
      • 1970-01-01
      • 1970-01-01
      • 2021-11-13
      • 2014-01-09
      • 1970-01-01
      • 2018-02-08
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多