Prevent touchmove event conflict with scroll of jquery UI dialog

Question

Since on mobile device browser such as safari , when user drag the screen, the whole website will move along with the finger. So the common solution is :

addEventListener('touchmove', function(e) { e.preventDefault(); }, true);

This will prevent any touchmove event . However, since the browser on mobile device has no scroll bar , when user want to scroll the dialog box of jquery ui , the touchmove event need to be permit. This statement will block that event.

addEventListener('touchmove', function(e) { 
if (e.target.id != 'dialog' ) 
e.preventDefault(); 
return false;
}, true);

Then I add this statement to allow the dialog box to scroll. However, this solution has flaw because the background will be draggable and move along with user finger again. How to fix this problem? Thanks.

Answer 1

Been dealing with this all day and found this solution. When you want it to scroll the dialog on safari mobile on ipad/iphone/ipod, you need to use this:

if (/iPhone|iPod|iPad/.test(navigator.userAgent)) {
            $('iframe').wrap(function () {
                var $this = $(this);
                return $('<div />').css({
                    width: $this.attr('width'),
                    height: $this.attr('height'),
                    overflow: 'auto',
                    '-webkit-overflow-scrolling': 'touch'
                });
            });
        }