【问题标题】:MagnificPopup not working with iScroll 5MagnificPopup 不适用于 iScroll 5
【发布时间】:2014-01-17 14:42:53
【问题描述】:

我想升级到 iScroll 5 以提高在手机上滚动的性能,但 MagnificPopup 库停止在 iPhone/iPad 上工作。 以下是展示该问题的 2 个代码示例:

  1. Example of zoom working 在 iPhone/iPad 上使用 iScroll 4.2.5
  2. Example of zoom NOT working 在 iPad 上使用 iScroll 5

这两个示例都可以在桌面上运行,但在 iPhone/iPad 上,使用 iScroll 5 的示例 2 将无法在单击图片时打开 MagnificPopup 模式。

有什么可能导致这种冲突的线索吗?

【问题讨论】:

    标签: jquery mobile iscroll iscroll4 magnific-popup


    【解决方案1】:

    基本上,由于 iscroll 阻止了 touchevent 的默认 onBeforeScrollStart,因此如果 iscroll 意识到用户没有滚动,则会在目标元素上模拟并分派一个 click 事件。

    很好,但某些元素(如文本字段、锚标记、带有超链接的图像标记)会获得焦点;遗憾的是没有考虑到这一点。

    要解决此问题,您可以将 HTML 标记添加到 iscroll.js 或 iscroll-lite.js 在下一行。在 js 文件中搜索preventDefaultException,您可以添加您希望对其执行操作的标签。

    默认值是

    preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT)$/ },
    

    我已经添加了 "A""IMG" 标签

    preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|A|IMG)$/ },
    

    享受吧,亲爱的,它一定会奏效的。

    还有更多关于你可以做的事情,而不是上面,你还可以将点击和缩放设置为 true。 当你 IScroll 对象声明时

    var myScroll = new IScroll('#wrapper', { click: true, zoom: true });
    

    它适用于您的点击和缩放事件。

    【讨论】:

    • var myScroll = new IScroll('#wrapper', { click: true, zoom: true }); 为我工作
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2011-12-17
    • 1970-01-01
    • 1970-01-01
    • 2014-06-22
    • 2013-02-24
    相关资源
    最近更新 更多