www.webdeveloper.com
Results 1 to 3 of 3

Thread: Touch events causing slow vertical scrolling on ios mobile

  1. #1
    Join Date
    Jun 2013
    Posts
    2

    Touch events causing slow vertical scrolling on ios mobile

    Hey All,

    My question is: Is there a way to preserve the Native IOs vertical scrolling functionality (momentum,velocity) after binding a touchmove event to the full page wrapper that handles horizontal swipes?

    Basically have this little script that pulls out a panel (next product or prev product) from the right or left of the mobile device on 'dragleft/dragright'. Got everything working fairly smoothly using css3 transforms. However im now noticing that the vertical scroll of the page has become laggy- at least not at all as smooth as it should be. Realizing this is of course because i have a touchmove listener attached to the whole scrollable area (in order to derive the swipes) and so I'm guessing its waiting till touch release to actually scroll? Which is a pretty crappy experience.
    I've tried almost everything I can think of but it seems that any sort of touchmove handling - even it has no function - is causing the same affect on the native scrolling functionality -> for ios mobile at least.
    Has anyone ever ran into this? Thanks for any help

  2. #2
    Join Date
    Dec 2012
    Posts
    99
    Touch events shouldn't cause the scrolling of the page to slow down unless your preventing the default action when moving, I tested to see if there were any issues using this short script that detects a swipe from right to left, and found no issues.

    HTML Code:
    var body = document.getElementsByTagName('body')[0];
    var startX;
    var startY;
    body.addEventListener('touchstart',function(e) {
    	startX = e.changedTouches[0].screenX;
    	startY = e.changedTouches[0].screenY;
    	
    });
    body.addEventListener('touchend',function(e) {
    	var x = e.changedTouches[0].screenX;
    	var y = e.changedTouches[0].screenY;
    	if(x-startX < -100 && y - startY <= 40 && y - startY >= -40) {
    		alert('test');
    	}
    });
    If you post some of your code it might be easier to see the problem.

  3. #3
    Join Date
    Jun 2013
    Posts
    2
    Thanks for your reply, 'touchmove' is where I'm having issues. Need to detect drag as the css3 transform follows the finger when dragging out from the right or left side.
    I'm using hammer.js as a gesture detection script.
    So basically something like this :
    body.hammer({drag_min_distance: 10,swipe_velocity: 0.7}).on("dragright", function(event) {
    pageprev.css('transform', 'translate3d(' + event.gesture.distance + 'px,0,0)');

    Event if I drop the lib and just attach touchmove to body I do still get the scrolling problem. Its not a huge lag but a slight delay.

    ..

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles