I've been working with overlays that have scrollable content (via -webkit-overflow-scrolling: touch;) on a web app targeting new-ish iPads.
The designs call for certain scrollable overlays to be occasionally visible over the regular body content, while keeping that body content touchable. These overlays aren't modals, they're more like menus.
Everything's mostly fine and I haven't had to resort to custom scrollers yet (like iScroll or ftscroller). But I'm experiencing one issue:
If you scroll the main body content (long articles, etc) quickly and let momentum carry the animation, subsequent taps inside the overlay content are treated as taps to the body directly. The result is that the overlays appear frozen, since they can't be interacted with as the body itself is moving. Any actions taken on them is translated to gestures aimed at the body.
I've tried enabling iScroll on the overlay scrollers to no avail, as taps into them are still being hijacked by the body as it scrolls.
Has anyone experienced this and come up with any work arounds?
Related
I'm using Ember-Gestures which implements Hammer.js in a Cordova app to implement some simple gesture controls.
I'm running into a major problem whereby any gesture that triggers an animation (transition, transform, SVG animations), if the screen is scrolling any amount, that animation will freeze and be at its end state when scrolling is complete. In particular, I have an element on a vertically scrollable page which should (ideally) be able to be pinched in and out to expand it into multiple elements or back into one.
I'm familiar that as an optimization iOS freezes all animation during scroll. However, since pinch and swipe gestures can both slightly scroll the screen, this is terrible for user experience because elaborate transitions can be completely frozen if the user swipes, for example, slightly up and to the left rather than just directly left.
I've tried a few solutions to enable rendering during scroll like those here, but these don't seem to work on contemporary versions of iOS. I've also tried the hammerJS e.preventDefault() method to freeze scrolling during gestures called through the Ember-gestures extension, so my method looks like:
swipeLeft(e) {
e.originalEvent.gesture.srcEvent.preventDefault()
// Do stuff
},
...but this doesn't have any appreciable effect. (Maybe there's something wrong here? gesture had no preventDefault() method itself, and ember-gestures seems to try to abstract some of this away.
Is there any way I can either keep animations rendering during scrolling (this seems unlikely), or alternately STOP a page from scrolling right before performing an animation (and prevent scroll while it's executing)?
Alternately is there any way I can add constraints to what is interpreted as a "pinch" or "swipe" gesture such that those that would also be interpreted as scroll gestures are excluded.
My solution here ended up being to add event handlers such that when the screen is touched with multiple fingers, the body is set to fixed position such that it's unscrollable for the duration of the touch (with the fixed position removed when touch is ended). I added the handlers to the pinchStart and pinchEnd events
I suspect there might be a more elegant solution out there, but for the purpose of disabling accidental scrolling while pinching so that D3.js animations won't freeze midway, this was a quick and effective fix.
I have a UIWebView that loads a new request when the user scrolls a set distance past the end, or before the beginning of the content (ie. into the area that "bounces" back), via the scrollView delegate
Unfortunately, I have found that once the bounce animation starts, it has to complete, and completely bounce back to the edge of the content area, before the UIWebView will display the new content that it has loaded.
Is there any way to interrupt this, and have it not need to bounce back before displaying the new content? I would prefer for the old content just to disappear without needing to bounce all the way back to its edge . Either that, or speed up the animation.
Things to note:
I do NOT want to turn off bouncing.
I have tried importing quartzcore and using -removeAllAnimations on every view I can think of, including the superview, and it doesn't help.
I have tested it, and it is not because of latency in the loading of the request that is causing the delay in displaying the new content.
There are a few UIViewAnimationOptions that look like they could be helpful, but I can't see where I would use them, and I don't really want to subclass UIWebview if I can help it.
Any ideas?
thanks in advance
I've been researching how to use a UIWebView embedded in a UIScrollView for a while now and cant seem to find an easy fix to my problem. I'm using a UIWebView because a UITextView, although allowing hyperlinks, does not allow you to change the link color from the standard blue apple sets.
But using a UIWebView introduces another problem: It blocks the UIScrollView it is embedded in from handling scroll events because a UIWebView handles these events within its own private implementation.
Although this allows me to use its embedded links, the UIWebView absorbs the touch events which doesn't allow me to scroll up/down when dragging within the UIWebView itself. I worked around this problem by placing a transparent UIView overlay exactly over the UIWebView, intercepting the touch events that it receives, and resigning it as first responder so that the UIScrollView that they are both subviews of can handle the scrolling appropriately.
Now, however, I can't seem to think of solution to the new problem this introduces: I can't click on the links within my UIWebView that is right under the UIView Overlay.
What is the best way to forward touch events to a UIWebView that is right underneath my transparent UIView in order to trigger my UIWebView's delegate method 'webView:shouldStartLoadWithRequest:navigationType:' for tapping on links?
FYI from UIWebView API doc:
Important: You should not embed UIWebView or UITableView objects in UIScrollView objects. If you do so, unexpected behavior can result because touch events for the two objects can be mixed up and wrongly handled.
Back to the question,
UIWebView has property called scrollView, try doing:
webView.scrollView.scrollEnable = NO;
I've got a UIView which the user drags on and off of the screen (like a drawer).
The UIView has a bunch of buttons, some always visible, others hidden until the user 'opens' the drawer.
For some reason, the UIButtons that are 'off screen' on the initial UIView presentation aren't being passed events when they're later moved onto screen.
While the others receive all the events all the time.
Seems buggy to me, I would have thought the SDK would handle all this itself?
I've got a very simple example which you can take a look at: http://cl.ly/2r1c0k2p361B3B1A461L
Thanks in advance.
After a bit more research, it had to do with the views clipping boundaries.
The buttons were being drawn, but were essentially out of the views frame, so no events were registered.
More details on this question: Programmatically Created UIButtons Below Screen Not Working?
I am using the JQueryMobile framework and the ScrollView component http://jquerymobile.com/test/experiments/scrollview/.
Is there a way to receive an event when the user begins to scroll?
Unfortunatley I couldn't find a hint searching the docs and the internet
jQM Docs:
http://jquerymobile.com/demos/1.0/docs/api/events.html
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.