我不知道这是否是错误,是否做错了或者这仅仅是HammerJS的正常行为,但是我试图使用HammerJS为我正在使用Cordova开发的应用制作滑出菜单(Facebook风格) 。

到目前为止,除一种功能外,我一切正常:HammerJS杀死附加了HammerJS的元素的子元素的本地-webkit-overflow-scroll: touch;。我在文档中找到了所有可以找到的选项,但都无法解决这个问题。

有任何想法吗 ?

这是我的咖啡代码

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
        )

最佳答案

是的,这显然是HammerJS的预期行为:

https://github.com/hammerjs/hammer.js/issues/250

我目前正在尝试寻找一种替代方法,以使捏合手势在全局范围内运行而又不会破坏iOS上的滚动。

07-24 18:11