Mobile scrolling on injected elements

[Jason Griffith]

Hi everyone,

I'm working on a Knockout based Cordova application.  I have several elements that need to be scrolled in mobile devices.  However these elements are being added and removed from the DOM based on user interaction.  Right now we've been implementing a js plugin called iScroll for this and manually firing it every time we change the DOM.  Is there something built into Knockout we could harness that would detect a class name  in the element and call the iScroll functionality automatically? 

If not, is there a better approach to handle this that I'm unaware of?  Would love to have a better solution for this as it slows down our development.

Thanks,

Jason

[Fredrick Dominy]

I assume that the list is a ko each and the list is an observable array? Have you tried a ko.computed function that updates the iscroll in conjunction with a change in the observable array?

[Jason Griffith]

Thanks for the reply!

The various elements are added by various ways.  Some are added by modals popping open which have elements populated by ajax calls.  Others are created after a view change and and ajax call returns data into a list.  Each time the view changes, the data is updated with data that changed from the user. 

One suggestion I received from someone was to use the MutationObserver js method.  I'm considering doing that but wasn't sure if KO had something I was unaware of right out of the box?