Support for iScroll 5?

[Hexodus]

Are you planing to switch to iScroll 5?

By the way - thank you a lot for this awesome plug-in! I'm using it for my current project and I really like how ease to use it is.

[jtara]

Yes, I do plan on supporting iScroll 5. It will likely be an all-new widget, and probably will only support jQuery Mobile 1.4+.

Sorry, no specific timeframe, but will probably be waiting until iScroll 5 is out of beta. I'd rather not code toward a moving target.

[frankie-loves-jesus]

iScroll 5 is now out of beta:

http://cubiq.org/fyi-iscroll-is-out-of-beta

[jtara]

Thanks, and already at 5.05, so looks like Mateo is on top of the bugs.

I'm going to give some thought this weekend to how I'm going to create an all-new JQM plugin for iScroll 5 and perhaps get a start on a skeleton.

I'm thinking right now it will be more tightly-coupled, and likely will incorporate iScroll 5 as a git subproject and then replace some parts with my own in a build process, rather than monkey-patching as iscrollview currently does. The iscroll5 code is now nicely modularized so should be much simpler now to arrange, for example, for iscrollview to intercept event registration and events.

The drawback is that you won't be able to mix and match iscrollview and iscroll versions as you can now, unless you are willing to clone the repo and do the build.

[rizi007]

Hey mate iScroll 5 is out now. I was thinking of integrating iscroll 5 with jquerymobile iscrollview but I guess since you are doing it, and will be quick at it.

Can you kindly give me a time frame when is that likely to be finished ?

Cheers, Riz

[dwhogg]

Any updates on integration with iScroll 5?

As an aside, it looks like you can no longer download the 4.2 branch of iScroll (which you recommend). It LOOKS like you can download it as there are links for both 4.2 and 4.2.5 - but if you try they are both 4.2.5 versions. (Link to iScroll releases https://github.com/cubiq/iscroll/releases ).

Thanks!

[TorchMan]

Hey Mr. Tara,

are you actually doing some integration work on JQM 1.4 and iScroll5? Would be really nice, to see it in action.

[twilly86]

Hey Torchman, I saw on the iscroll forum you got this working with iscroll 5. Would you mind sharing what you did?

Thanks!

[TorchMan]

As i'd already stated in the forum, give the container or wrapper an overflow:hidden and position:absolute. Meaning: the content section is your wrapper. The scroller is the inner content which is a container within the wrapper. There your dynamic content has to be injected. After injection call the resize function. Thats it. The keypoint is to make the wrapper absolute positioned and give it no overflow.

[twilly86]

@TorchMan, where you able to use the existing iscrollview library with iscroll5 or did you have to do this just using iscroll5?

Thanks!

[TorchMan]

@twilly86, i'm using the iScroll5 from Matteo Spinelli. And I personally think you won't need a wrapper like iScrollView from Jhon Tara anymore. IScroll5 is veeery sophisticated by now.

In order to increase performance you should considder following when initializing an iScrollInstance:

eventPassthrough: false //listen to vertical swipes only scrollX: false //no horizontal scrolling scrollY: true preventDefault: false, //do not prevent a possible click - we'll take care of it scrollbars: true, //show scrollbar mouseWheel: true interactiveScrollbars: true, //The scrollbar becomes draggable and user can interact with it. shrinkScrollbars: 'clip', //do not shrink, just move it out of the container useTransition: false, //use rAf instead of CSS3 - this increases performance bindToWrapper: true, //bind the scroll event to the wrapper not the whole document bounce: true, //do not perform a bounce on scrollEnd fadeScrollbars: false //make it dependend upon the used device - Android is getting choppy on fade}

[frankie-loves-jesus]

@TorchMan that is fantastic news!

Maybe we should set up a proof-of-concept jQM app here on GitHub? Including something that sets data-iscroll to overflow: hidden; position: absolute?

[TorchMan]

@frankie-loves-jesus, don't get me wrong. The current iScrollView (made by J. Tara) does not work with iScroll5. And in my humble opinion you do not need it anymore. Maybe this is the reason, why John did not has provided us an iScrollView for iScroll5. You simply do not need it. And it works perfectly with overflow: hidden; position:absolute and JQM 1.4.2 on the wrapper. As i'd already stated: Why making things more complicated? Surely iScrollView for iScroll4 was really nice, helpfull and a gem. But now you simply can get rid of it. Provide you attributes via CSS and thats it. With this information here, someone surely will provide a JSFiddle, soon.

[frankie-loves-jesus]

@TorchMan I totally understand. We should set up a JSFiddle ASAP.

It would be cool if we could add a data-iscroll feature too though, so that whenever it's specified, jQuery will make that div overflow: hidden; position: absolute so we don't have to add it to our CSS.

[frankie-loves-jesus]

And yes, iScrollView has been fun. We should all get together and throw a huge party for @jtara.

[TorchMan]

It was the only way. He has done agreat job.

[TorchMan]

Hey guys, i've made a fiddle for all of you. The fiddle contains the iscroll5 probe version. I don't know why, but i could not link it as external ressource over git, but here you can see, that iScroll5 works with JQM 1.4.2

http://jsfiddle.net/TorchMan/rakD8/

Btw, in combination with snap.js you'll have beautiful panels. Wayyy better than those provided by JQM, And yes, it is possible to combine Snap.js with iScroll5 and JQM.

http://jsfiddle.net/TorchMan/MexXY/

[frankie-loves-jesus]

Awesome fiddles @TorchMan ! ;)

Btw use http://rawgit.com/ next time you want to link external resources via github :)

[frankie-loves-jesus]

@TorchMan have tried simplifying things a little. The goal is to be able to just set data-iscroll to the divs you want scrolled:

http://jsfiddle.net/frank_o/DWKNw/9/

Let me know your thoughts.

[TorchMan]

@frankie-loves-jesus your fiddle works like a charm, of course. But of course you wanna get rid of the instantiation of an iScroll5 obj. So when you do that, you're gonna loose the control on what features you wanna have active (like probing, like attaching to certain events, etc.) Especially when nulling the reference of a certain iScroll5-Instance you'll get a problem, since the instance was setup automatically by the data-iscroll attribute. So how you'll gonna null this reference in order to release resources? I do understand, that instantiating iscroll via an HTML attribute would be more comfortable but you'll have to provide more params to customize the options and you should get back a reference in case you wanna kill a reference. Remember that.

[frankie-loves-jesus]

@TorchMan thank you so much for your response !! Lots of things to chew on here :)

but you'll have to provide more params to customize the options and you should get back a reference in case you wanna kill a reference.

Do extend the fiddle. I must admit I don't really need to kill a reference just yet, but it would be cool to have a fiddle that everyone can agree on.

@jtara what do you say, is it time to retire iScrollView and thank it for its service?

[TorchMan]

@frankie-loves-jesus I guess, I will not have the time to extend the fiddle. Not because, I don't want to, but I haven't got the time. And YES, it's time to leave iScrollView. The new iScroll5 performs way better than iScroll4 in combination with iScrollView. Especially with heavy content within the wrapper, you'll really feel difference.

Best regards, TorchMan

[twilly86]

That fiddle is great, I think I'll use this and try and get rid of iscroll view.

You could always create a global variable to store the iscroll variable the curren page, and then on page change, you call destroy on iscroll so you can create a new one.

It would be nice to have the iscroll object stored on an element like iscroll view, but it sounds like that is a decent amount of work.

I used the resizing functions extensively with iscrollview to get the content area sized correctly with fixed header and footers present, We might also need to add something similar.

[TorchMan]

@twilly86 The keeping of a global var is ok. As long as you not only destroy the iScroll internal refference with the destroy method, but also nulling the global var. With iScroll5 you can get rid of the extensive usage of refreshing. But for me it was never coz of having a fixed header or footer but of dynamic content. IMHO there is really no need to wrap iScroll5 in order to have an iScrollView5 or something like that. There are too many downsides. At least you'll get a little more comfort when instantiating an iScroll5 reference but alway on cost of configurability.

[aherrick]

Hey guys I appreciate the comments so far. I've setup a simple pen with two jQuery mobile listviews. I'm trying to figure out the best way to add iScroll5 to them. Can anyone help out?

http://codepen.io/aherrick/pen/LzCFJ

EDIT: I've made a stackoverflow too:

http://stackoverflow.com/questions/24637695/jquery-mobile-iscroll5-bind

[jonas-db]

@aherrick i tried the answer on the SO post, but it isn't working well with links. I've noticed that if you use simple text (read no links) it works perfectly, but once you start dragging on links (both with mouse/tocuh) it just messes up completely, any ideas or fixes?

this is one without links, works perfect; http://fiddle.jshell.net/frank_o/DWKNw/9/show/

I've also found an old jsfiddle with iscroll 4.2 where it works perfect (unless you start and end on the same link, then it thinks it is a click even when you scrolled..). The first link is a real link so start dragging from there. But anyways as i'm unfamiliar with iscroll i don't know what changed from 4.2 to 5 or what might causing this: http://fiddle.jshell.net/CKSYJ/131/show/

Any help is appreciated! Thanks

[frankie-loves-jesus]

Thought I'd share a working version of my previous fiddle. Stripped down version of @TorchMan's with iScrollView's data-iscroll feature.

http://jsfiddle.net/frank_o/Z69su/show

Works fine in Chrome's mobile emulation. Constructive criticism welcomed.

[jonas-db]

@frankie-loves-jesus yours works fine because it aren't links.. i forked your fiddle with links: http://jsfiddle.net/NbxBF/1/ if you try that it doesn't work as expected

[jonas-db]

I've came up with a few solutions: add -webkit-user-drag: none, but this is not widely supported so i'm using pointer-events which is better supported: http://jsfiddle.net/NbxBF/4/ (but doesn't has IE support)

works ~ fine now, any suggestions are welcome!

EDIT: 4.2 does not seem to show this annoying errors (test: http://fiddle.jshell.net/CKSYJ/132/show/), it works perfect even in IE, so anyone know why this isn't working anymore in 5?

EDIT2: is the iscrollview not doing this kind of job? because now i realise that you didn't include the iscrollview.. that will be the problem i guess

[frankie-loves-jesus]

Hey @jonas-db!

so i'm using pointer-events which is better supported: http://jsfiddle.net/NbxBF/4/ (but doesn't has IE support)

Awesome, very neat trick :)

EDIT2: is the iscrollview not doing this kind of job? because now i realise that you didn't include the iscrollview.. that will be the problem i guess

I think iScrollView has been abandoned. I guess this repo acts more like a social network for jQM scroll enthusiasts.

Also I added support for multiple instances incase you need to run refresh on individual scrollers:

http://jsfiddle.net/frank_o/NbxBF/27/

Also like @twilly86 mentioned:

You could always create a global variable to store the iscroll variable the curren page, and then on page change, you call destroy on iscroll so you can create a new one.

Maybe we should look into this as well.

[frankie-loves-jesus]

Also I added support for multiple instances incase you need to run refresh on individual scrollers:

Something like this would be ideal, not quite sure how to make it work though:

http://jsfiddle.net/frank_o/NbxBF/29/

[frankie-loves-jesus]

Something like this would be ideal, not quite sure how to make it work though:

Fixed here: http://jsfiddle.net/frank_o/NbxBF/30/

[gabaum10]

The thing I liked about iScrollView were the dynamic pull down refresh callbacks. (iscroll_onpulldown). Is there a way to do that out of the box with iScroll5? I tried to find something in the docs/demos, but couldn't find anything...

[frankie-loves-jesus]

No idea. Any chance scrollEnd will suffice?

[gabaum10]

No, not directly. That's a real bummer. That's literally the only feature that's keeping me using iScrollView. I guess I could write something, but that's the whole point of using a library like this, to not have to write stuff like that.

[n7167113]

I'm trying to add support in my fiddle test for the data-scroll in the container div as mentioned earlier in one of frankie's post by simply moving his code over to mine but for some reason the styling is a little bit different. This is what I have now: http://jsfiddle.net/n7167113/4134z9ra/3/

Scrolling works fine but the bottom of the list is cut-off a little but which didn't happen of frank's post. Except on his one, there was a huge padding gap at the bottom of this list.

Does anyone know what's happening here to make this happen and how to fix? (actually not sure if this is the best place to post this comment but frank redirected me here so here is where I'll post)

[normanhh3]

@n7167113 I think the issue you are seeing is related to the fact that the scroller's height is being derived from the element's offsetHeight property from the DOM. I have another example where the offsetHeight is not returning the correct complete height.

Update: You may want to try setting display: inline-block for helping to identify the correct height of the scroller. I had a problem with floated elements that I fixed by using {{{display: inline-block}}} as well as {{{clear: both}}}

[normanhh3]

Hi folks, I've got an iScroll 5 compatible jqm widget that has had some testing done by me. At this point it has been setup as a Meteor project (just 'cuz I want to learn more about it). At this point its pretty raw but I am planning on using it with a jQuery Mobile Apache Cordova app I maintain so it will see the light of day. ;-) http://github.com/normanhh3/jqm-iscroll

[gabaum10]

@normanhh3 Thanks for this. I'll take a look when I get a chance and try to implement it. It might be a little while, but I'll follow the project and update as I work with it.

[normanhh3]

At the moment it hasn't been fully regression tested to work in all situations and there is a flag "fullscreen" that triggers a number of layout related changes to support iScroll properly. One other issue is that there are a number of CSS rules setup in a css file in the repo that need to go with the widget. Ultimately for jqm-style widget packaging it seems like those rules ought to be created dynamically through code instead of relying on attaching an external CSS file. I'm open to suggestions as packaging jqm widgets isn't my area of expertise. At the moment it meets my needs and I'm iterating on it actively right now.

[frankie-loves-jesus]

@gabaum10 just spoke to the author and iScroll 6 is almost complete. It should have the feature you're looking for.

@n7167113 you're using an old incomplete version of my fiddle without the required CSS. Please see the final one I posted.

@normanhh3 why do you need a jQM widget when iScroll 5 works just fine by itself?

[normanhh3]

@frankie-loves-jesus I am a software engineer, I prefer clean separation of concerns and jQuery Mobile's widget mechanisms provide a standard abstraction layer to interface to iScroll - strictly speaking not needed, but because of the unique environment of jqm a helpful abstraction. My needs are also along the lines of @gabaum10 in the need for a pull-to-refresh for my interaction paradigm so I needed to extend the existing functionality of iScroll with additional html and css.

@frankie-loves-jesus any idea when the release of iScroll6 is going to be?

[frankie-loves-jesus]

Hi! Well, to each his own I guess. I just don't see what's so clean by having to involve jQuery Mobile into a feature that doesn't need it. jQuery Mobile is the polar opposite of clean -- and will be until at least version 1.7 -- but by then it will support scrolling natively so we won't be needing iScroll in the first place.

Personally I prefer just cleanly separating my concerns into scopes and files as opposed to making them depend on frameworks which one day might get replaced by something better. Like they say:

Perfection is achieved, not when there's nothing left to add, but when there's nothing left to take away.

Forgot to ask about the iScroll6 release date. One thing is for sure though, the more we donate the faster it'll be!

[normanhh3]

@frankie-loves-jesus that is the great value of open source software. Freedom to have diverse opinions and reflect them in open repositories for the "world" to evaluate. :-)

Incidentally, if there wasn't any value being added by the framework I wouldn't have integrated in the way I did.