I'm developing a mobile site. I want to incorporate a touch scroll area of the page with fixed header and footer areas.
I tried iScroll 4, but it gave problems when using early versions of Android.
The following solution works very well with iOS:
http://neave.github.com/touch-scroll/footer.html
Would you be able to suggest a solution that will deliver this functionality for Android phones?
From JQuery Mobile's doc site:
Scroll events
scrollstart
Triggers when a scroll begins. Note that iOS devices freeze DOM
manipulation during scroll, queuing
them to apply when the scroll
finishes. We're currently
investigating ways to allow DOM
manipulations to apply before a scroll
starts.
scrollstop
Triggers when a scroll finishes.
Look here for more information
I haven't been able to find a good example. You can look at $.mobile.silentScroll or $.mobile.slider here
Related
I've implemented jScrollPane and I'm having an issue on touch devices.
The example I'm using is http://jscrollpane.kelvinluck.com/drag_size.html where I have a vertical scroll using a circular button image for the scroll on the track. The class that's added to this is jspDrag.
On desktop, when you click and scroll the vertical button, it drags down and the content scrolls up, which is natural in my eyes.
The issue I'm facing is on touch devices (check the example URL above in Chrome using iPhone/iPad emulation in dev. tools) where you can't actually drag the button down - you actually have to scroll it up for the content to scroll?!
Users are definitely not going to know this as it's a button rather than a content block that you're using as a control.
I'd like to be able to touch and drag the button down on touch devices, rather than up, to make the content scroll.
Has any one come across this issue and managed to solve it? I've searched SO and Google Groups with no luck.
Thanks.
Unfortunately jScrollPane seems to just work like this, with an annoying caveat, which is unfortunate - I really liked the plugin.
I came across http://manos.malihu.gr/jquery-custom-content-scroller/ which functions the way it should and runs super smooth on touch devices.
Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?
I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/
I've created a virtual-rendering implementation (similar to what you would find in the project SlickGrid). Everything seems to be working very well, with one problem: On Mac, smooth scrolling (the rubber-banding and fade-to-stop) doesn't work on my element when I add overflow: auto??
http://syntaqx.com/infiniload/
Any help would be appreciated.
You can use JS Librarys:
https://github.com/ftlabs/ftscroller
FTScroller is a cross-browser Javascript/CSS library to allow touch,
mouse or scrollwheel scrolling within specified elements, with
pagination, snapping and bouncing support.
I'm creating a Flash Air application for desktop. The goal is to create an app that opens up a webpage, shows virtual keyboard and duplicates the behaviour of scrolling like in iOS browser : you scroll with your finger - not with the scrollbar.
As I'm creating it on desktop, I need to scroll it with the mouse.The application is nearly complete. I'm connecting webpage with Air application using StageWebViewBridge. Now I need to create touch screen effect for scroll.
To do that - I need JavaScript. Can anyoone suggest something ?
Here's the reference : http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/list
PS : This is Sencha framework - suited for mobile devices. I need that kind of dragging scroll on my desctop device!
If you're looking for the same kind of scrolling like in iOS you should search for momentum scrolling. You'll find, for example, those JavaScript libraries "iScroll" and "Scrollability". Take a look, how they manage the scrolling.
Also interesting is this article on how scrolling on iOS works:
http://ariya.ofilabs.com/2011/10/flick-list-with-its-momentum-scrolling-and-deceleration.html
Hope this helps, and happy refactoring. ;)
I've created a website with a parallax street scene. See here for an archived version.
It works just fine on all major desktop browsers, and Safari Mobile. It works fine in Mobile Firefox and Chrome for Android Beta also. However the default Android browser has issues with the scroll event. Let me be clear. Scrolling is not the issue. The div scrolls as required. The scroll event doesn't fire. This issue I experience on Honeycomb as well as ICS.
I'm not concerned about other mobile browsers because for mobile screen sizes one usually does not see the parallax scene; mediaqueries and conditional JavaScript loading take care of that. Responsive design and all that jazz.
Basically, I've written a parallise() jQuery plugin that positions each image based on its position and 'depth'. This function is bound to the scroll event.
On Android Browser, this event only fires at the start of the next touch, instead of continuously.
OK, so I thought that perhaps if I bound the function to touchstart, touchmove, and touchend events I would solve my issue. No cigar. Other touch events are also bugged. Applying the suggested workaround causes the events to fire, but as I have to e.preventDefault(), scrolling (the whole point of the exercise) is disabled.
What if I just poll the position of the stage div relative to the window div? Turns out that the position information is only updated at the start of the next touch.
I am at the end of my tether. Any help would be much appreciated.
Even if the touch events worked correctly on the bugged versions of Android, and you were then effectively able to track the native scroll position during a drag, this would be prone to error. For example, it wouldn't account for the momentum animation which happens after the touching has finished.
iOS and Android make sacrifices to improve the performance of scrolling. On both platforms, it's not possible to get the accurate scroll position until the scroll has completed. The scroll event (on the <body>) doesn't fire until the momentum animation is finished. So while your original question is about scroll events on an overflowing <div>, fixing this might not be totally helpful for you anyway.
If you want an animation to update in time with the scroll, then you need to perform the scroll programatically rather than using the browser's native scroll. The best library to do this is iScroll. You can achieve parallax effects very easily as seen in this demo.
If you need more complex effects (the walking character, in your example), you can opt for the "probe" version of iScroll which allows pixel-perfect polling of scroll position in return for reduced performance.
However, there are many downsides to using iScroll:
You may need to change your markup and styling
It is unnecessary overhead for desktop browsers, but due to markup changes may be difficult to use only as a fallback
The scrolling will not feel perfect - on iOS, with its usually excellent scrolling performance - the slight difference in momentum calculation can feel jarring. On Android, the scrolling can become more laggy than usual.
Swipe shim that doesn't need preventdefault on touchstart: https://github.com/TNT-RoX/android-swipe-shim