无法单击与Iscroll 5的链接

时间:2014-03-08 13:05:42

标签: scroll iscroll

我正在使用Iscroll 5,我可以使用此代码滚动,我没有问题。 唯一的问题是我的iphone我无法点击链接,我不知道为什么......

<script type="text/javascript">
var scroll;
function loaded() {
    scroll = new IScroll('#contenu', {
    tap:true,
    desktopCompatibility: true,
        scrollbars: true,
        interactiveScrollbars: true,
        freeScroll: true,
        scrollX: true,
        scrollY: true,
        momentum: false,
        onBeforeScrollStart: null,
        mouseWheel: true
    });
}

//disables browser mouse scrolling
if (window.addEventListener) {
    window.addEventListener('DOMMouseScroll', wheel, false);
}

function wheel(event) {
    event.preventDefault();
    event.returnValue = false;
}

window.onmousewheel = document.onmousewheel = wheel;
</script>

如果我使用此代码,我可以点击但我无法滚动...

<script type="text/javascript">
var myScroll;
var showkey =true;
function loaded () {
    myScroll = new IScroll('#contenu', { 
    tap:true,
    desktopCompatibility: true,
    onBeforeScrollStart: function (e) {
                var nodeType = e.explicitOriginalTarget ? e.explicitOriginalTarget.nodeName.toLowerCase():(e.target ? e.target.nodeName.toLowerCase():'');

                if(nodeType !='select' && nodeType !='option' && nodeType !='input' && nodeType!='textarea' && !showkey) {
                     e.preventDefault();    //prevents showing keyboard - scrolling
                }//otherwise, show keyboard, do default
                if(!showkey) showkey = true;
            },       
    });
    $('a, input, #sendmsg, .ml_tabs').on('touchstart', function(e) {
        e.stopPropagation();
    });
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(iScrollLoad, 200); }, false);
</script>

3 个答案:

答案 0 :(得分:19)

true

上设置Iscroll的点击选项

IScroll click documentation

myScroll = new IScroll('#youDIV',
                {
                    scrollX: false, 
                    scrollY: true
                    ,click:true // open click event
                    ,scrollbars: false 
                    ,useTransform: true
                    ,useTransition: false
                    ,probeType:3
                });

答案 1 :(得分:1)

1:您可以提供一个jsfiddle,以检查您的代码有什么问题。

2:为什么通过添加eventlisteners来禁用鼠标滚动?只需设置mouseWheel: false即可。

3:iScroll捕获touchmove事件并处理它们以决定用户想要做什么。因此在初始化iScroll时添加它:

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

4:我没有看到,为什么你要设置像onBeforeScrollStart: null这样的惯用事件处理程序。这根本没有意义。 你可以,例如启用禁用iScroll当你不想滚动时如果某个对话是打开的(如a):

myScroll.on('beforeScrollStart', function(event) { if (isDialogOpen){ myScroll.disable(); } else{ myScroll.enable(); } });

5:一个简单的点击事件处理程序,例如<div>应按预期工作

$( document ).on( "tap", "#mydiv", function( e ) { e.preventDefault(); alert("mydiv clicked!"); });

6:初始化iScroll时使用preventDefault: false, //do not prevent a possible click - we'll take care of it

答案 2 :(得分:1)

&#34; maksim.lin&#34; GOT IT正确!我不允许投票:
但是&#34;点击:true&#34;是最好的,因为添加&#34; preventDefault:false&#34;将完成这项工作,但它会导致您的鼠标(如果使用PC)选择滚动之外的元素(文本选择和侧滚动变得生涩)。 #34;点击:真&#34;解决了手机上的问题,并且不会在PC上创建选择问题。