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.
Related
Good morning, I created a simple trello-style interface.
Obviously I want to scroll the cards in a column: that works on a desktop pc with mouse wheel, but not on a smartphone using the touch scroll gesture.
I tried to use the "hold" param when creating draggables, nevertheless the scroll gesture didn't work.
How can I do?
Thanks.
The scrolling issue was caused by the CSS instruction "touch-action: none;" (it was present in the interact website's examples). Just removed it and now scroll works fine.
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.
This issue seems to affect android only.
I'm working on a phonegap App for a client and I have a scrolling area using jQuery animate. However one of the nested divs doesn't move with it's parent div and stays fixed in position.
Again this issue only presents on android devices and works fine in desktop browsers and iOS.
Can anyone shed any light on what this may be?
Seems jQuery animate runs into issues with relatively positioned items, removed relative position and used margin and it seems to work now.
I'm looking to recreate the vertical scrolling from this page: http://www.apple.com/iphone-5s/
Is there a library that will implement this (with jquery is ok). Particularly, I want to override the mouse wheel and keyboard so that scrolling down will smoothly jump to the next section and scrolling up will smoothly jump to the previous section.
OnePageScroll may be what you're looking for: http://www.onextrapixel.com/2013/09/18/onepagescroll-js-creating-an-apples-iphone-5s-website/
You can also look at fullPage.js, simple but quite powerful. You can even link it with a menu and use landscape scrolling too. Also, it works in IE8 and IE9 not like onePageScroll which only works with IE 10 and modern browsers.
Demo
Website
You can use something like http://github.com/stephband/jparallax.
also try http://ianlunn.co.uk/plugins/jquery-parallax/
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