Fullpage.js: scrollOverflow: true, causes not clickable links on mobile devices

[stephan-strate]

I just upgraded the fullpage.js plugin to the newest version, because I had problems with the scrolling bar in the old version.
Now the scrolling bar is fine, everything works well, but not the links!
I set scrollOverflow: true and when iScroll adds a scrollbar all links are not clickable anymore, just tested it on 3 different phones (LG L90, LG L40 & an old Sony) and 2 tablets (Nexus 7, Lenovo A10-70). Don't know what to do.

[alvarotrigo]

Seems to be a quite important bug of iScroll.js... https://github.com/cubiq/iscroll/issues/783

[alvarotrigo]

It seems you can solve it for now by using the iScroll option click:true.
So just pass it on the scrollOverflowOptions option of fullpage.js:

$('#fullpage').fullpage({
     scrollOverflowOptions: {
          click: true
     }
});

[stephan-strate]

This one works, thank you!

[alvarotrigo]

I'll keep it open as it is something to be added by default in fullpage.js.

[alvarotrigo]

Solved in 2.8.1

[martarakoczy]

When click is set to true, tap is not working and with click set to false tap is working but click is not. That was my problem.
I fixed it with (using Modernizr):

var scrollOptions = {click: false,  wheelStep: 20};
if (Modernizr.touch) {
    scrollOptions.click = true;
}
$('#fullpage').fullpage({
    scrollOverflow: true,
    scrollOverflowOptions: scrollOptions,
... })

[alvarotrigo]

@martarakoczy yeap, its a pity iScroll.js doesn't seem to be maintained by @cubiq as actively anymore.
I guess we'll have to keep fixing bugs in the forked version of iScroll.js.

[gyduxa]

Hello
I still can't get the links to work on mobile iOS, with the properties:

scrollOverflow: true,
scrollOverflowOptions: {
    click: true
}

I'm using fullPage version 2.8.7 and iScroll version 5.2.0.

Codepen: http://codepen.io/gyduxa/pen/qaQJLr - which simulates the non working link on iphone or iphone in chrome devTools.

Is there something missing?

Thank you

[alvarotrigo]

iScroll version 5.2.0.

I suppose you are using the vendor file scrolloverflow.js included in fullPage.js right?
If not, you should. It is not a copy of iScroll.js but a fork which solves iScroll.js bugs.

I'm using fullPage version 2.8.7

Try it using the dev version fullPage.js 2.8.8 which solves some click and touch event issues in 2.8.7. Note it is not yet available in the minified version.

[gyduxa]

Thank you very much for the fast answer!

Yes, I'm using a jquery.scrolloverflow.min.js . In the first comment of the file it says:
/*! iScroll v5.2.0 ~ (c) 2008-2016 Matteo Spinelli ~ http://cubiq.org/license */
but I didn't find a CDN to use in the codePen so used the regular iScroll there.

I've updated to fullPage.js 2.8.8 and now it works!

It only has an error but I don't find any difference in the navigation on desktop and iphone:
Uncaught TypeError: iScrollInstance.wheelOff is not a function - jquery.fullPage.js:2969

Thank you very much!

[alvarotrigo]

Uncaught TypeError: iScrollInstance.wheelOff is not a function - jquery.fullPage.js:2969

You need to include scrolloverflow.js before fullPage.js.

[gyduxa]

That was dumb of my part...
Thank you very much again.
No errors. Solved!

[stevenprinsloo]

Hi @alvarotrigo ,

I have a similar problem on my site, where when I view it on my mobile I cannot click the links on the middle of the page, well, basically the links don't work. I have - scrollOverflow set to false.

Using fullpage.js 2.8.7, tried using 2.8.8 and it didn't work.

<div class="section" id="section1">

        <a href="project01/project01.html"><div class="intro">
            <h1>Malform</h1>
            <p>visual identity project</p>

        </div></a>
    </div>

For some reason, this link won't work.

Here is the link to the page I am referring to: http://stevenprinsloo.co.za/portfolio2/#secondPage

[alvarotrigo]

Using fullpage.js 2.8.7, tried using 2.8.8 and it didn't work.

Use 2.8.8.
If it doens't work for you, you are doing something wrong.

If you believe its a bug in fullPage.js then provide an isolated reproduction in jsfiddle or codepen and proceed to create a new issue in the forum.

[antoinefaddoul]

Hello I am using the version 2.8.8.
When I have a page that contains Links and Buttons, and it is opened using Chrome for Android, I am facing the following issues:

1. When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = false ==> The Links are Not Clickable but the Buttons are Clickable!
2. When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = true ==> The Links are Clickable but the Buttons are Not Clickable!

Note that the above issues are not occurring in case I don't have scrolling in my page.

Any idea???

[alvarotrigo]

When the page contains scrolling & scrollOverflow = true & scrollOverflowOptions.click = false

Why are you even setting the click option? Don't set it at all. FullPage.js sets it to true for touch devices and false otherwise. Which seems to be the only way it works properly.
You don't have to worry about it. If you change it, you'll have to deal with the consequences by yourself. Not something fullpage.js will support.

[antoinefaddoul]

If I don't set the Click option, the buttons become un-clickable.

[alvarotrigo]

@antoinefaddoul can you open a new topic with a link to an isolated reproduction of it (no external css or js) ?

[10ve-t]

Hi.
I am facing same issue. could you check ｔhe link below on iPhone or other smartphones?
http://codepen.io/TakahiroHishinuma/pen/RorqQe
I can not click checkbox, but link is clickable.

[alvarotrigo]

I can not click chekbox, but link is clickable.

You are not using the vendor file required by fullPage.js when using scrollOverflow, which is located in the vendor folder as stated in the docs.
You are instead using 5.2.0/iscroll-infinite.min.js and fullPage.js might not work as expected with it.

[10ve-t]

the vendor file required by fullPage.js when using scrollOverflow

i use vendors/scrolloverflow.min.js is this file incorrect? I reproduce this error in the link below
http://egao1010.sakura.ne.jp/fullpage/
I can't click checkbox and submit button on mobile devices.

[alvarotrigo]

Try placing your click event on the afterRender function. Check the FAQs to know why.

Change this

$(window).on('load',function(){
  $('#fullpage').fullpage({
      scrollOverflow: true,
  });
  $('#submit').click(function(){
    alert('hello');
  });
});

To this:

$(window).on('load',function(){
  $('#fullpage').fullpage({
      scrollOverflow: true,
      afterRender: function(){
            $('#submit').click(function(){
                 alert('hello');
             });
      }
  });
});

Or use delegation:

 $(document).on('click', '#submit', function(){
      alert("a");
});

[10ve-t]

Thank you for answering. But it still doesn't work.
I tested three patterns.
http://egao1010.sakura.ne.jp/fullpage/

One

$('#submit-3').click(function() {
  alert('hello3');
  });

It works as expected on PC, but doesn't work on mobile devices.

Two is based on your advice

afterRender: function(){
  $('#submit-2').click(function(){
    alert('hello2');
  });
},

It works as expected on PC, but doesn't work on mobile devices. same as One pattern.

Three

$('#submit').click(function() {
  alert('hello');
  });
$('#submit').on('touchstart', function() {
  $(this).trigger('click');
  });

It works well on PC and mobile devices too.

From the above, when scrollOverflow:true on mobile devices, the buttons doesn't respond to Click event, but it seems to respond to Touchstart and Touchend event. Is this only way to work properly the buttons like submit and checkbox when scrollOverflow:true on mobile devices?

I'm sorry to bother you again.

[alvarotrigo]

@TakahiroHishinuma if you change your buttons for normal text, it works as expected.
This is clearly a iScroll issue and not a fullpage.js one.
I was able to find related topics on iScroll about it:

[alvarotrigo]

Very probably related with the click:true issue in iScroll.js which seems never got fixed.

[10ve-t]

Solved.
Thank you for your quick and polite response.

[Oblik-Design]

how did you solve this ??

[10ve-t]

@Oblik-Design
I modified scrolloverflow.js. Replace the below

case 'click':
        if ( this.enabled && !e._constructed ) {
          e.preventDefault();
          e.stopPropagation();
        }

with

case 'click':
        if ( this.enabled && !e._constructed && target.type != 'submit' && target.type != 'checkbox') {
            e.preventDefault();
            e.stopPropagation();
        }

Refer to this link.