I have multiple div which scroll at the same time. I had a css property to have the inertia effect on my all div (for safari on iPad) -webkit-overflow-scrolling: touch;. It works perfectly on the desktop web browser. But I have an effect that I want to change when i launch my webpage on my iPad.
The problem on ipad is : When i use the inertia effect, all div synchronize when the inertia effect is finished. I would like to have the same effect than the desktop web browser, that is, they are synchronized for the effect of inertia and not at the end.
You know, if there is a solution?
To complete my explanation, I created a : JSFiddle
As I know, CSS scrolling inertia on mobile devices cannot be handled with JavaScript. Element scroll event is fired when you scroll it by hand and when animation is finished. During animation no events are fired. So you have to emulate inertia with javascript to sync your divs (and this is not good idea).
Related
In short when moving from one state to another in an AngularJS application I use CSS animations to animate the view change. For example applying a fade or transform via the .ng-enter and .ng-leave classes.
But in iOS 7+ you can transition from one page to another by swiping your finger off the screen edge left or right and it does a back or forward action the same as clicking the back and forward buttons on the toolbar. However because the OS does its own animation back to the previous page in the history stack, and then AngularJS fires the state change after and then does the CSS animation, you get double animations and a flicker as the content you can already see is then animated back into view... How can we prevent this? As it's a really crappy looking user experience and looks like a bug to end users.
I thought about detecting iOS 7+ then disabling the animations. But I'd only want to disable the animations when doing the slide off the edge with the finger and not for actual clicks or the browser buttons. As far as I can tell there is no way to detect this. But the UX really suffers.
Has anyone had this issue before? Worked around it?
i think you will need to figure out where the swipe started from when a navigation event was triggered. might be as simple as detecting if there's a touch on the page when the event triggers - it implies the user is touching it at that very moment.. in that case, disable the css animation. in theory that's it but i never attempted nothing even close. :)
I am trying to get a div to go from 100% opacity to 0% opacity on scroll.
I made this Fiddle and it works great in a web browser, just as I'd hope. It works in mobile browsers too, but with one horrible downside.
var divs = $('.cover_image');
$(window).on('scroll', function() {
var st = $(this).scrollTop();
divs.css({
'opacity': (1 - st / 40)
});
});
(What is happening in the fiddle is the top div is going to opacity:0 as you scroll, revealing another div below it with the same background-image, but blurred. Creating the impression the same image is blurring the more you scroll)
In a web browser as you scroll the div drops in opacity progressively with a fade like affect which is great.
However in a mobile browser the change of opacity doesn't take effect until you release your finger from the the screen. So there is no progressive change of opacity. It only makes the changes visually as you release your finger from the screen, not as you scroll.
Is there a solution for this? I have tried adding in scrolling touch to my css, but it doesn't make a difference.
-webkit-overflow-scrolling: touch
Scrolling distance on mobile works very different from desktop. Even if you detect each step in the touch event, this is only half the truth. When the user releases, the site will continue to scroll for a bit while deaccelerating. This is called momentum scroll and will in most cases not be picked up by the touch event.
There are to my knowledge no perfect solution to this, since different devices handle scroll and touch very differently. There are however a few options you could look into.
Scrolling libraries
There are libraries to help you solve this problem. For instance one called scrollability that emulates scrolling to work more consistently.
Scrollability adds a good imitation of iOS native scrolling to your
mobile web apps.
Scrollability is a single script, it's small, and it has no external
dependencies. Drop it into your page, add a few CSS classes to
scrollable elements, and scroll away.
Ignore the scroll completely
Don't look at the touch or scroll events. Instead use setInterval or requestAnimationFrame with desired frequency that reports the pages current position (document.documentElement.scrollTop) at all time. Base your animation on this value instead of scroll or touch events. You might want to limit this to touch devices since it's not needed for desktop.
Write your own scroll functionality
Disable scrolling and make your own, without for instance momentum scroll, that is suited for your needs. Note that the scroll event is usually disabled on desktop if you disable scroll, but mousewheel works. I have been down this path and I would not recommend it. Instead you should probably go with the library approach at the top.
We're making elements "active" and animating their opacity from 0.2 to 1 based on which element is most on screen using JQuery. However on iOS the active class can be seen to be applied during the touchmove event but the animation to show the element does not.
Is this possible view CSS or will we have to use something like iScroll to take over the scrolling of the page?
I think that's just how iOs works. The animation actually happens once the touch event ends, not during like in desktop. Plugins like ScrollMagic rely on iScroll for smoothing things out.
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
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