Databases
StackOverflow2013
Postsdbo
POAny options for position during webkit-overflow-scrolling: touch event
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POAny options for position during webkit-overflow-scrolling: touch event
    primarykey
    data
    text
    <p>I have a div with webkit-overflow-scrolling set to touch. On iOS this then gives me an updated position during the touchmove event, but once the user lets go this event ends and a final call to touchend is made before events all stop, but the div continues to momentum scroll.</p> <p>This is the behaviour I want, but I also want to update the page during this momentum scrolling.</p> <p>I trigger a call to requestAnimationFrame when the touchend event happens, and I can loop this while the momentum scroll occurs. But when I get DOM information, it's frozen until after the mometnum scroll ends.</p> <p>I've tried using both the scroll position of the scrolling element and elementFromPoint, but both just have the position the scrolled div was in at the time touchend was triggered, and don't update until the momentum scroll ends.</p> <p>Does anyone know of any way to get real time DOM information on iOS (6+, not worried about 5)</p> <p>Here's some code I'm using:</p> <pre><code>var glideStart; var bird_scanner = document.getElementById('bird-scanner'); bird_scanner.addEventListener('touchend',function() { glideStart = null; requestAnimationFrame(glide); }); function glide(timestamp) { // if we need to reset the timestamp if( glideStart === null ) { glideStart = timestamp; } // determine if we've moved var bird_scanner = document.getElementById('bird-scanner'); console.log( document.elementFromPoint(337,568) ); // calculate progress (keep running for a very long time so we see what happens when momentum ends) var progress = timestamp - glideStart; if( progress &lt; 10000 ) { requestAnimationFrame(App.Controller.bird.glide); } } </code></pre> <p><strong>Update</strong></p> <p>After a <strong>lot</strong> of attempts at this, I think it really is impossible without using some library to try and mimic the momentum scroll instead of using the built in option (something I find never really gives as smooth results). Apple are clearly very worried about things interfering with their momentum scroll animation and preventing it rendering properly.</p> <p>I ended up removing the momentum scroll and just detecting swipes and moving through a bunch of elements at once when that's triggered.</p> <p>I did notice some particularly strange behaviour. When I had webkit-overflow-scrolling: touch set on an element that was scrolling the page up/down and added a setTimeout(some_func,0) to the touchend event, the function wasn't triggered until the momentum scroll ended. When I tried the same thing on a scroll going left/right it triggered the function straight away. No clue why this happens, decided it must just be some strange webkit quirk.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USMatt McDonald
    1. USMatt McDonald
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. POAny options for position during webkit-overflow-scrolling: touch event
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POAny options for position during webkit-overflow-scrolling: touch event
      1. This table or related slice is empty.
      1. VTUpMod
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload