CODEWITHSUNDEEP
scrolliscroll
user3162341
user3162341

Reputation: 251

Can't click on links with Iscroll 5

i'm using Iscroll 5, i can scroll with this code, i have no problem. The only problem is with my iphone i can't click on the link, and i don't know why... 

<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>

If i use this code i can click but i can't scroll ... 

<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>

Upvotes: 3

Views: 9875

Answers (3)

maksim.lin
maksim.lin

Reputation: 191

Set the click option of the Iscroll on true

IScroll click documentation

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

Upvotes: 19

Ulysses Bravo
Ulysses Bravo

Reputation: 21

"maksim.lin" has GOT IT RIGHT!! I'm not allowed to vote:
But "click:true" is best, because adding "preventDefault: false" will do the job, but it will cause your mouse(if using PC) to select elements outside the scroll (text selecting and side scrolling gets jerky). "Click:true" fixes the issue on mobile phones, and won't create selection issues on PC.

Upvotes: 1

TorchMan
TorchMan

Reputation: 274

1: You could provide a jsfiddle, in order to check what's wrong with your code.

2: Why disabling mouse scrolling by adding eventlisteners? Just set mouseWheel: false and you're fine

3: iScroll captures touchmove events and handles them in order to decide, what the user want's to do. Therefore add this when initializing iScroll:

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

4: I don't see, why u're setting a custo eventhandler like onBeforeScrollStart: null This makes no sense at all. You can e.g. enable disable iScroll when you dont wanna scroll if some dialogue is open (like a ) like this:

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

5: a simple click eventhandler on e.g. a <div> should work as expected

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

6: When initializnig iScroll use preventDefault: false, //do not prevent a possible click - we'll take care of it

Upvotes: 1

Related Questions