Repository: hammerjs/hammer.js

Issue #250: Hammer.js makes -webkit-overflow-scrolling: touch buggy on iOS
Created: 2013-04-16T02:40:58Z
When using Hammer.js on element inside of a container with -webkit-overflow-scrolling: touch on it, scrolling got jumpy and less smooth.
I observed this simply when calling Hammer(element), without any of my own code.
For now I've solved it by just stripping out Hammer.js and creating my own touch handling, but I'm still submitting this issue (although I didn't see it mentioned before).
Note: It's also worthwhile I think, for Hammer.js to check and make sure the parent container's scrollTop hasn't changed between touchstart and touchmove/touchend, to be sure of whether or not it's a scroll event (iOS doesn't provide a live scroll event for native scrolling) - this was a huge help in my code.

Duplicate issue #489: Hammer on element prevents -webkit-overflow-scroll: touch of child elements
Created: 2014-02-27T10:30:08Z
Hi,
I don't know if this is a bug, if I am doing something wrong or if this is simply normal behavior of HammerJS but I am trying to use HammerJS to make a slideout menu (facebook style) for an App I am developing with Cordova.
So far I have got everythng working fine except one : HammerJS kills the native -webkit-overflow-scroll: touch of child elements of the element that has HammerJS attached to it. I have played around with juste about all the options I could find in the doc but can't seem to get this working.
Any ideas ?
Here is my code in coffescript
Hammer($page, {
            transform_always_block: false,
            drag_block_horizontal: false,
            drag_block_vertical:false
            })
            .on('dragstart', (event)->
                #event.gesture.preventDefault()
                #event.gesture.stopPropagation()
                direction  = event.gesture.direction
                $mainMenu.show()
                $('.UIViewContainer').css(overflow: 'hidden')
                if direction is 'left'
                    $('#homeDisableOverlay').animate({
                        opacity: 0
                    }, 500, 'ease', ->
                        $(@).hide()
                    )
            )
            .on('dragright', (event)->
                event.gesture.stopPropagation()
                direction  = event.gesture.direction
                offsetLeft = $page.offset().left
                scaleMenu  = 0.9 + scaleStep * offsetLeft

                if scaleMenu > 1
                    scaleMenu = 1
                if scaleMenu < 0.9
                    scaleMenu = 0.9

                if((offsetLeft > sidebarOffset) or (!App.PageDrag)) then return false

                if !App.sidebar
                    offset = event.gesture.deltaX
                    if offset > sidebarOffset then offset = sidebarOffset
                    $page.animate({ translate3d: offset + 'px, 0, 0'}, 0)
                    $mainMenuTable.animate({ scale: scaleMenu}, 0)
            )
            .on('dragleft', (event)->
                event.gesture.stopPropagation()
                event.stopPropagation()

                console.log direction

                offsetLeft = $page.offset().left
                scaleMenu  = 0.9 + scaleStep * offsetLeft

                if scaleMenu > 1
                    scaleMenu = 1
                if scaleMenu < 0.9
                    scaleMenu = 0.9

                if((offsetLeft <= 0) or (!App.PageDrag)) then return false

                if App.sidebar
                    offset = sidebarOffset + event.gesture.deltaX
                    if offset < 0 then offset = 0
                    $page.animate({ translate3d: offset + 'px, 0, 0'}, 0)
                    $mainMenuTable.animate({ scale: scaleMenu}, 0)

            )
            .on('dragend', (event)->
                event.gesture.stopDetect()
                event.gesture.preventDefault()
                event.gesture.stopPropagation()
                speed = 300 / event.gesture.velocityX
                if speed > 300 then speed = 300


                if(event.gesture.direction is 'right' and !App.sidebar)
                    if((event.gesture.deltaX > sidebarOffset/2) or (event.gesture.velocityX > 0.4))
                        $page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, speed, 'ease')
                        $mainMenuTable.animate({ scale: 1}, speed, 'ease')
                        App.sidebar = true
                        $('#homeDisableOverlay').show().animate({
                                opacity: 0.3
                            }, 200, 'ease')
                    else
                        $page.animate({ translate3d: '0, 0, 0'}, 200, 'ease')
                        $mainMenuTable.animate({ scale: 1}, 200, 'ease')
                    $('.UIViewContainer').css(overflow: 'hidden')
                    scaleMenu = 1

                else
                    if((event.gesture.deltaX < sidebarOffset/2) or (event.gesture.velocityX > 0.4))
                        $page.animate({ translate3d: '0, 0, 0'}, speed, 'ease')
                        $mainMenuTable.animate({ scale: 0.9}, speed, 'ease')
                        App.sidebar = false
                        setTimeout(->
                            document.getElementById('mainMenuScroll').scrollTop = 0
                        ,speed)
                    else
                        $page.animate({ translate3d: sidebarOffset + 'px, 0, 0'}, 200, 'ease')
                        $mainMenuTable.animate({ scale: 0.9}, 200, 'ease')
                        setTimeout(->
                            document.getElementById('mainMenuScroll').scrollTop = 0
                        ,200)
                    $('.UIViewContainer').css(overflow: 'auto')
                    scaleMenu = 0.9
            )

Closing comment (2015-06-10T03:55:53Z): Closing as dup of #250