It it possible to use iscroll.js with fullpage.js?

[kyle-jennings]

First of all, I love this plugin. I'm using it on my site howfuckedisthemetro.com and it works great.

The only issue I have is using slimScroll.js for the scroll hijacking (its very choppy on mobile) on the scrollable sections/slides I've opted to try iscroll for a better mobile experience but I cant seem to get it to work.

I have my scrollable area inside of a slide (which gives it a set height which I need) and Im applying the iscroll directtly to the div.slide. iscroll looks like it adds the appropriate CSS to the first child of div.slide which is div.container as seen below

<div id="line-start" class="slide scroll-wrapper active" style="width: 50%;"> <div class="container" style="transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); -webkit-transition: 0ms cubic-bezier(0.1, 0.57, 0.1, 1); transform: translate(0px, 0px) translateZ(0px);">

But I cannot click and drag the div.container element.

I have my iScroll javascript well after loading fullpage.js:

`var scrollStart, scrollEnd;
function iScrollLoaded() {
    scrollStart = new IScroll('#line-start',{
      mouseWheel: true,
      scrollbars: true
    });
}
setTimeout( iScrollLoaded(), 5000 );`

and tried loading it before hand as well) and I dont see any console errors but div.container simply will not scroll.

I also set the normalScrolling option to ignore that div.container
Any suggestions?

[alvarotrigo]

I haven't tried it yet. Not sure if it can be applied from outside the plugin anyway.

[alvarotrigo]

I'm waiting for iscroll.js to lauch a compatible version with IE 8. I really would like to have that scrolling for fullpage.js.

[kyle-jennings]

Gotcha, looks like its been in the plans for a while. I'll keep my eye on the project, thanks!

[DevinWalker]

+1 for iscroll rather than the current scrolling method... the current solution is just wayyy too choppy.

[alvarotrigo]

@DevinWalker I agree with you, but iScroll doesn't support IE 8 and 9....

[DevinWalker]

I'm not too concerned about that... ;] progressive enhancement.

Right now I'm attempting to implement iScroll afterRender... hopefully this is easy.

[alvarotrigo]

I'm not too concerned about that... ;] progressive enhancement.

But many other people are, and fullPage.js is characterized for giving support to old browsers such as IE 8.

[DevinWalker]

The number of tablet and mobile users greatly trumps >IE9 and will only continue to grow. Right now there are more mobile devices than humans on the planet. I would suggest planning fullPage.js for the future. In 5-years IE8 will hopefully only be a memory.

[alvarotrigo]

fullPage.js will keep giving support to IE 8 and IE 9. It is still being a demand in many companies nowadays and around 15% of users still using IE 8 or IE 9 as detailed in some studies of 2014.

In 5-years IE8 will hopefully only be a memory.

If the usage of IE 8 and 9 goes down, I will take it off fullPage.js. But not until that occurs.

[alvarotrigo]

Right now there are more mobile devices than humans on the planet.

Even with iScroll, I still recommend to optimise the site for mobile phones so users won't have to use any extra scrolling system on them.
Good developers know it and try to avoid using overflowScroll.

[Torquin]

Hi guys,

Instead of using iScroll or slimscroll (that still doesn't have any momentum), set scrollOverflow to false and add $('.slide .active').css('overflow-y','auto'); in the afterSlideLoad function. This should set the native scrollbar with momentum to devices ;)

[alvarotrigo]

@Torquin the native one looks quite ugly from a computer. iScroll.js has momentum.

[ivansammartino]

Now that support for older IE versions is over, maybe iScroll would be a better alternative :-) https://www.microsoft.com/en-US/WindowsForBusiness/End-of-IE-support

[alvarotrigo]

Now that support for older IE versions is over, maybe iScroll would be a better alternative :-)

Not really. IE 9 still being used out there.

In any case, fullpage.js is ready to support other external libraries for the scrollOverflow feature, in fact, there's a GIST that includes iScroll.js rather than slimScroll.js, but as I pointed out in this conversation it doesn't seem to be such a great alternative as it will show the default scroll bar on Windows rather than the mac style one.

[mac2net]

LOL you think giving IE9 users Wndows style scroll bars is a problem?

[alvarotrigo]

@mac2net who said the scroll bar is only a problem for IE 9? I said "it will show the scroll bar on Windows". All browsers, all versions. (LOL)

[REPTILEHAUS]

Im back!! My fix for this issue is pretty much useless - Has anyone come up with anything that will solidly work for the overflow scrolling slides. Ive seen all sorts of solutions like using underscores debounce etc etc but nothing seems to be solid and slimscroll have little or no solutions. would really like to get this sorted as its a massive site im working on and I dont want to have to scrap the idea just because of this scrolling on osx

[alvarotrigo]

fullpage.js changed from slimScroll.js to iScroll.js in 2.8.0.