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.
Related
When using D3 on IOS (tested on versions 8.1, 10.3.1, and 11.4), any transformations called after a .transition() within a scroll listener do are not applied until the scroll has completed. For example, if the following were inside a scroll listener function, the height would not be set until the scroll finished:
d3.select('.my-rect')
.transition()
.attr('height', () => {
// assume `date` updated by scroll listener
return myTimeScale(date);
});
If I remove the .transition() then everything works as expected.
If I put in console.log statements, it's clear that the myTimeScale(date) is being executed on every scroll/touchmove event, but nothing changes visually until the scroll has concluded and the user lifts their finger from the screen.
A couple important things to note here:
This is happening even when listening for both touchmove and scroll events
This does not appear to be a problem relating to scroll inertia because nothing is updating even with a completely controlled scroll
I can work around this problem, but curious if anybody knows what is causing it.
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.
Whenever I swipe the page controller and tap the UIPageControl at the bottom in the opposite direction of the swipe at the same time, the page that is currently being displayed and the page number in the pageControl will be out of sync.
Has anyone ever had this weird issue and solved it?
Let me know if you need any additional info.
Just checked out the docs for UIPageControl. I never realized this myself, but you can use page controls for input:
When a user taps a page control to move to the next or previous page,
the control sends the UIControlEventValueChanged event for handling by
the delegate. The delegate can then evaluate the currentPage property
to determine the page to display. The page control advances only one
page in either direction.
My suggestion would be to either disable the page control or update your app to respond to input on it. Setting userInteractionEnabled to false on my page control resolved the problem for me.
I have weird problem while UITableView is scrolling I'm not able to invoke any events (touch down button, change layout colour). Funny thing is that when I touches on UISeachBar, the keyboard appears immediately.
I realize that main thread has been blocked, however I wonder is there any solution to fix this problem.
With the short description of your problem, I suppose that it is because when you scroll your tableView run loop change from NSDefaultRunLoopMode to NSEventTrackingRunLoopMode (see Run loops)
To change your UI while scrolling, the solution seems to perform your UI updates on the NSRunLoopCommonModes which includes the two loop mode you target.
Be prevent that it could make your tableview scrolling clunky.
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?