pp-scrollable class not working in the mobile

[gonyot]

Hi. After I've added the class pp-scrollable in the div, the scrollable page is not working in the mobile. It works perfectly in the web and other browser but not in the mobile. The mobile I've tried so far are tab 10.1 samsung, iPhone 6 and iPhone 6 Plus. Once I've reach the page where it has the pp-scrollable class, it will not scroll and even scroll down for the next page. It will only scroll up. Is there anything that I need to change in the javascript or css? in order to make it work in the mobile devices.

By the way, I've currently usin the latest version 1.5.1 pagepiling.js.

UPDATE:

I was able to make it workable but now the problem is it shows the border of the scroller. If I remove the class element overflow-y under the class pp-scrollable, it will be disappear but the scroll will not work anymore. I've attached the thing I'm talking about.

Is there a way to remove or hidden the board thing? Please advise.

[jeanwisser]

Hi ! I'm working on the same issue : when I use pp-scrollable I'm not able to scroll using touch devices. How did you manage to do it ? Thanks a lot.

[gonyot]

Hi, The walk around I did was that I didnt put the class pp-scrollable on the same div as .section. Instead, inside the div section, I've created another div and have a class pp-scrollable. I can scroll on the div which has the pp-scrollable class but in order to scroll down for the next page or section, you will need to scroll outside the div of pp-scrollable and add the div id in normalScrollElements in js. For now, I'm doing this while waiting for Alvarotrigo team fix the bug. By the way, this is a very nice and smooth plugin.

For Alvarotrigo team, the scroll boarder thing I've mentioned will only show up on the div where I put the pp-scrollable class. If I put the pp-scrollable together with the class section then it will not show but I cant scroll down when going to the mobile. Also, the scroll boarder is visible in Windows to any web browser.

[vacquah]

• 1 - having same issue on iPad on iPhone.

[jeanwisser]

It's really weird because I can use the touch screen of my laptop, but it's not working on phone or tablet.

[vacquah]

Any update on this? Seems this is a major bug. Doesn't work even on the Hugeinc example.

[grbicb]

Any chance of this bug being fixed?

[alvarotrigo]

Yeah, I'll fix it whenever I find some time.

[gonyot]

Great. We will look forward to it.

[alvarotrigo]

I've been taking a look at it. The solution is not great. There won't be easing and the scrolling will look a bit unnatural. I would recommend to avoid using pp-scrollable in touch devices.

[EricJammin]

+1 for working on this. It would be really useful, as this plugin has a beautiful effect.

The strange thing for me is that the hugeinc example does actually work from my iphone, ipad, and android phone. However the scrolling is very sluggish on that area.

But when trying to implement on another site, it just simply doesn't work at all. I tried adding the .pp-scrollable class to the div inside that .section as @gonyot suggested, but it still didn't work.

[alvarotrigo]

The strange thing for me is that the hugeinc example does actually work from my iphone, ipad, and android phone. However the scrolling is very sluggish on that area.

That's just one of my tries as I said:

I've been taking a look at it. The solution is not great. There won't be easing and the scrolling will look a bit unnatural.

[sparkison]

Any update on this? You mentioned it could be done, but would be clunky it sounds like. So does that mean you're not going to work on fixing this issue? Or is a workaround in progress? Hoping the latter ;)

Thanks!

[ghost]

Hi just a checkin to see if its possible to find out more about the workaround?

[ldetrick]

+1 for finding a work around! I'm stuck with the same bug. The Huge site removes the piling section completely at the end of the slideshow and there is just a normal page underneath. On scroll up it brings the piling back.

[hananint]

I got the same bug. And the work around did not work for me. I also tried to look into http://www.adigoodrich.com to check their solution, but that also didn't work.

[liquorburn]

Hi, I'd like to thank you for your awesome plugin!

I added a simple public method to check whether we reached bottom (or top) of the scrollable section:

PP.checkScroll = function(a,b) {
    return isScrolled(a, b);
};

I'm using it within afterLoad callback as follow:

var timeOutScroll = null;
$("#pagepiling").pagepiling({
    // some other options
    normalScrollElements:  '#section_scrollable',
    normalScrollElementTouchThreshold: 14,
    afterLoad : function(anchorLink, index) {
        if (2 === index) { // my scrollable section has index == 2
            $("#pagepiling").pagepiling.setAllowScrolling(0);
            $("[data-anchor='" + anchorLink + "']").on("scroll", function(e){
                clearTimeout(timeOutScroll);
                timeOutScroll = setTimeout(function() {
                    if (true === $("#pagepiling").pagepiling.checkScroll("bottom", $("[data-anchor='" + anchorLink + "']"))) {
                        $("#pagepiling").pagepiling.setAllowScrolling(1);
                        $("#pagepiling").pagepiling.moveTo(index+1);
                    }
                    if (true === $("#pagepiling").pagepiling.checkScroll("top", $("[data-anchor='" + anchorLink + "']"))) {
                        $("#pagepiling").pagepiling.setAllowScrolling(1);
                        $("#pagepiling").pagepiling.moveTo(index-1);
                    }
                }, 400);
            });
        }
    }
});

This way the scroll works on iPad or smartphones. No need for another plugin like Waypoints (as in http://www.adigoodrich.com/ )

[koyaanisqatsi80]

I have the same problem, I solved this by adding one line of code inside the function:

normalScrollElements: '.pp-scrollable'

And now it works perfect on ipad, iphone and other mobile device.

Hope this help ;)

[ghost]

That is awesome news! An entire github forum of thank yous for sharing!! :)

[katiehartrick]

perfect, this is the exact issue I had, is anyone able to add the solution to the docs?

[anteksiler]

@koyaanisqatsi80 That's not working for me on desktop screens, with this, I cannot go back to the normal non-scrollable slide on top.