Hammer.js打破垂直滾動當水平平移

我正在使用Hammer.js來尋找水平平移手勢，我設計了一個簡單的功能，當向左或向右平移時單擊按鈕。它工作正常，除了垂直滾動在觸摸設備上不做任何事情，或者它真的非常奇怪。Hammer.js打破垂直滾動當水平平移

這裏的功能：

var panelSliderPan = function() { 
    // Pan options 
    myOptions = { 
     // possible option 
    }; 

    var myElement = document.querySelector('.scroll__inner'), 
     mc = new Hammer.Manager(myElement); 
    mc.add(new Hammer.Pan(myOptions)); 

    // Pan control 
    var panIt = function(e) { 
     // I'm checking the direction here, my common sense says it shouldn't 
     // affect the vertical gestures, but it blocks them somehow 
     // 2 means it's left pan 
     if (e.direction === 2) { 
      $('.controls__btn--next').click(); 
     // 4 == right 
     } else if (e.direction === 4) { 
      $('.controls__btn--prev').click(); 
     } 
    }; 

    // Call it 
    mc.on("panstart", function(e) { 
     panIt(e); 
    }); 
};

我試圖在水平方向增加了識別器，但它並沒有真正的幫助（不知道如果我做到了，即使右）：

mc = new Hammer.Manager(myElement, { 
    recognizers: [ 
     [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }], 
    ] 
});

謝謝！

來源

2014-10-31 any_h

請提供一個工作的jsfiddle所以我們可以幫助你。 – 2014-11-10 09:53:38

-1

錘2.x不支持垂直刷/平底鍋。 Documentation說：

注：當調用錘（）來創建一個簡單的實例，平移和刷卡識別器被配置爲只檢測水平手勢

但是，您可以使用older 1.1.x version ，支持垂直手勢

來源

2015-03-26 14:34:21 fussinatto

我沒有看垂直鍋，而是水平鍋，它的工作原理。但它也禁用了正常的垂直滾動。 – 2015-03-26 14:39:40

你有沒有得到任何與此，我有一個類似的問題..？ – Stradosphere 2016-03-07 05:41:06

我相信這不是真的。初始化「pan」識別器時，您只需將'direction'設置爲'Hammer.DIRECTION_VERTICAL'。 – JohnP 2016-04-06 15:38:52

嘗試將touch-action property設置爲auto。

mc = new Hammer.Manager(myElement, { 
    touchAction: 'auto', 
    recognizers: [ 
     [Hammer.Pan,{ direction: Hammer.DIRECTION_HORIZONTAL }], 
    ] 
});

從hammer.js文檔：

當您設置爲自動它不阻止任何違約，並可能錘將打破touchAction。你必須手動調用preventDefault來解決這個問題。如果你知道你在做什麼，你應該只使用它。

來源

2015-10-14 11:23:08 patforna

這應該是被接受的答案。調用preventDefault（或返回false）的要求似乎是非常標準的，以防止事件的默認行爲（如果這是你想要的）。 – ChrisFox 2016-08-30 08:10:32

使它可以再次滾動，但打破了滑動手勢 – 2017-02-15 20:50:15

用戶patforna是正確的。您需要調整touch-action屬性。這將解決滾動無法工作，當你有錘子在移動大元素綁定。

您創建一個實例錘像這樣

var h = new Hammer(options.contentEl, { 
    touchAction : 'auto' 
});

我正在拉刷新功能，因此我需要pan事件。

添加識別器。

h.get('pan').set({ 
    direction : Hammer.DIRECTION_VERTICAL, 
}); 

h.on('panstart pandown panup panend', eventHandler);

的事件處理程序裏面，你看那個被觸發，並在event.preventDefault()當你需要它手動調用事件。這適用於錘子2.0.6。

任何人誰是尋找拉刷新代碼是取自 - https://github.com/apeatling/web-pull-to-refresh

來源

2016-04-06 15:35:41 JohnP

Hammer.js打破垂直滾動當水平平移

回答

相關問題