Question

我正在使用iScroll4并且效果很好！

这是我用来初始化，刷新和结束iScroll的函数：

function iniciarIscroll(){
    /*En ie7 no lo usamos*/
    if(!ie7){
        $(document).ready(function() {
            myScroll1 = new iScroll('nvl1');
            myScroll2 =new iScroll('nvl2');
            /*document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
            document.addEventListener('DOMContentLoaded', setTimeout(function () { loaded(); }, 200), false);*/
        });
    }
    return false;
}

function refrescarIscroll(){
    if(!ie7){
        myScroll1.refresh();
        myScroll2.refresh();
    }
    return false;
}


function terminarIscroll(){
    if(!ie7){
        myScroll1.destroy();
        myScroll1 = null;
        myScroll2.destroy();
        myScroll2 = null;
    }
    return false;
}

问题是它不会让<a>或<input>或任何东西被点击（或集中注意力，我不确定）;还有css：hover或：不会应用焦点;但它会在javascript中触发事件，如

.hover() or .click()

如果可能的话，有什么想法解决这个问题吗？

Answer 1

您只需要在iscroll的加载程序中进行此更改：

更改此行：

myScroll = new iScroll('wrapper');

为此：

myScroll = new iScroll('wrapper', {
useTransform: true,
zoom: false,
onBeforeScrollStart: function (e) {
var target = e.target;
while (target.nodeType != 1) target = target.parentNode;

if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA')
e.preventDefault();
}
});

Answer 2

  // Setup myScroll
  myScroll = new IScroll('#wrapper', {
    scrollX: horizontalSwipe,
    scrollY: !horizontalSwipe,
    momentum: false,
    snap: document.querySelectorAll('#scroller .slide'),
    snapSpeed: 400,
    bounceEasing: 'back',
    keyBindings: true,
    click: true
  });

对我来说，我只需要在最后一行添加click：true ... 花了一整天调试和实施所有建议的解决方案无济于事......

Answer 3

作者评论说表单兼容性很糟糕 - 这是一个已知问题，他正在为下一个版本修复。其他人在论坛中发表了评论：

从v4.1.9开始，对表单字段的支持仍在开发中。您可以通过包装在标签中使单选按钮和复选框工作（包装似乎比使用for =“”语法更好。

链接应该没问题并且可以在提供的演示中使用。您已在init脚本中注释掉e.preventDefault()调用，这是通常的罪魁祸首。表单兼容性问题也可能影响链接吗？

至于悬停事件，我可以告诉你，当点击一个元素时应该激活它。

希望有所帮助。最糟糕的情况 - 废弃您的代码并从项目的演示页开始，一次适应您的需求并继续测试。您很快就会知道哪种修改会破坏预期的行为。

Answer 4

当我希望用户能够进行编辑时，我使用的一种解决方法是“冻结”iscroll。 iScroll与输入的不兼容性是相关的，因为我可以告诉css转换结合它应用于滚动条中的内容的触摸支持。如果暂时禁用滚动条，则可以允许用户输入值。诀窍是确保在禁用时保留内容的当前滚动位置。当“冻结”时，用户可以更新可见区域内的输入。缺点是在此状态下滚动条不会滚动。你必须在某些事件上解冻它。

我将这些函数添加到iScroll.prototype中以使其工作：

_get_current_scroll_px: function (transformStyle) {
    //return the first string that looks like an integer, that should be the x translation
    return /[\-0-9]+px/.exec(transformStyle)[0];
},


freeze: function () {
    this.disable();
    this.savedStyle = this.scroller.style[vendor + 'Transform'];
    this.scroller.style['marginLeft'] = this._get_current_scroll_px(this.savedStyle); //use margin left instead of transform to position scroller
    this.scroller.style[vendor + 'Transform'] = '';
},

thaw: function () {
    this.scroller.style[vendor + 'Transform'] = this.savedStyle;
    this.scroller.style['marginLeft'] = '0';
    this.enable();
}

调用或冻结它看起来像：

//user triggered event causes freeze
yourFreezeEventCallback: function () { 
    myScroll1.freeze();
    //now user can use visible inputs on screen
}

解冻它看起来像：

//user triggered event causes thaw
yourThawEventCallback: function () { 
    myScroll1.thaw();
    //now scrolling is back and inputs can no longer be edited or in focus
}

显然，你需要以某种方式将它集成到你自己的项目中，但它对我有用。它并不理想，所以我期待iScroll的更新。警告：这不是在IE中测试的，因此我不会在那里担保。我希望这至少是一个帮助你解决问题的开始。

Answer 5

当我第一次发现iScroll时，我认为这是解决我的许多问题的方法。然后这个问题让我很开心。在尝试找到解决方法时，我想出了this pull request。

拉动请求上有一个注释，虽然我不确定哪个拉取请求是/应该解决问题，但已找到另一个更好的解决方案。我会看看是否可以从该笔记的作者那里获得更详细的信息。

更新：可以找到相关的拉取请求here。我还没有机会测试它（我希望今天晚些时候确认Android支持。）

Answer 6

我也一直在努力使事物在移动环境中顺畅滚动，iscroll是我在搜索合适工具时考虑过的库之一。其他答案已经建议你如何解决你的具体问题，但我实际上建议使用scrollability（Joe Hewitt）或touchscroll（David Aurelio）。我认为可滚动性实际上提供了最好的感觉，但它并没有真正完成，你最终会遇到相同或类似的问题。我个人使用touchscroll进行我的项目，我推荐它。

我几周前在我的项目中尝试使用iscroll时，我不得不进行自定义点击操作和超时检查，我通过在触摸开始时注释掉e.preventDefault（）并插入一些我自己的函数在它实际滚动时捕获。从本质上讲，这些库都以相同的方式工作（捕获事件并阻止它们，运行css转换使得比DOM重绘动画更平滑，然后人工触发应该触发的任何事件）。这意味着您可以修复它的另一种方法是查找特定元素的点击事件何时发生，并在代码中手动触发。在touchscroll中，它会侦听最重要元素上的事件，这样你就可以通过简单地停止冒泡来覆盖行为......我不记得iscroll是否也这样做了。

这种（流畅的，原生的感觉，移动中的动画）仍然是一个处于各种技术边缘的领域，因此还没有人拥有完整的解决方案。我希望在几年内，移动设备可以改进，以便移动浏览器无论如何都只能处理滚动事件，但在此之前，我们不得不将这些解决方案整合在一起。祝你好运！

Answer 7

Android浏览器错误是Android内部非常旧版本的WebKit的结果，甚至在Android 4.3中也是如此。错误的根本原因 - 错误处理iScroll发送回浏览器的click事件（删除preventDefault只是停止发送此click事件） Android Chrome浏览器免于此错误，因为它已经升级了内部的WebKit库。

等待从谷歌升级Android WebKit。

Answer 8

position:absolute;

#pageWrapper

中的styles.css

就我而言，这解决了上述无法解决的问题。

Answer 9

试试这个

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

iScroll不会让项目被点击

9 个答案: