टच स्क्रीन पर एक समय में एक दिशा में स्क्रॉल करने के लिए केंडो ग्रिड को प्रतिबंधित करना

Question

जब कोई उपयोगकर्ता टच स्क्रीन डिवाइस पर होता है, तो मैं विकर्ण स्क्रॉलिंग को प्रतिबंधित करना चाहता हूं - इसलिए विचार एक समय में एक दिशा को स्क्रॉल करना है - क्षैतिज या लंबवत।

मैंने एक जेएस फिडल स्थापित किया है जो पता लगाता है कि स्पर्श स्क्रॉलिंग सक्षम है या नहीं और मैं एक्स और वाई निर्देशांक आउटपुट करने में सक्षम हूं। लेकिन मुझे ऑफसेट या कुछ भी नहीं दिख रहा है और मुझे इच्छित दिशा की गणना करने की आवश्यकता है।

मुझे पता है कि सेब directionalLockEnabled का उपयोग करता है जो प्रतिबंधित होगा, इसलिए मुझे आश्चर्य है कि ऐसा कुछ कैंडो में उपलब्ध है या नहीं। यदि नहीं, तो शायद एक तरीका है कि मैं यह समझ सकता हूं कि उपयोगकर्ता किस दिशा में स्क्रॉल करना चाहता है और अन्य समन्वय को 'फ्रीज' करना चाहता है।

एक जे एस बेला मैं (dataBound विधि में प्रासंगिक हिस्सा) बनाया:

http://jsfiddle.net/dmathisen/tskebcqp/

(प्रासंगिक कोड केवल स्पर्श पर काम करता है ... लेकिन अगर आप देव उपकरण में मोबाइल अनुकरण सक्षम काम करना चाहिए)

स्क्रॉल इवेंट ट्रिगर होने की मात्रा एक और मुद्दा है। काम करते समय, शायद मैं यह नियंत्रित करने के लिए एक बहस स्थापित कर सकता हूं कि यह कितनी बार ट्रिगर होता है।

Answer 1

यदि आप इस फ़िक्स के लिए जावास्क्रिप्ट का उपयोग करना चाहते हैं, तो आप एक्स और वाई चाल की श्रेणियों की गणना कर सकते हैं। कि टच डिवाइस के साथ के लिए, शुरू posi एक्स और वाई सेट जब touchstart और दूरी calcul जब touchmove

var touchY = touchX = 0; 
    $(document).delegate('.yourWrap', 'touchstart', function(e){ 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 
    $(document).delegate('.yourWrap', 'touchmove', function(e){ 

     if (Math.abs(touchX - e.originalEvent.touches[0].pageX) 
      > Math.abs(touchY - e.originalEvent.touches[0].pageY)) { 
      // Block overflow-y 
     } else { 
      // Block overflow-x 
     } 
     touchX = e.originalEvent.touches[0].pageX; 
     touchY = e.originalEvent.touches[0].pageY; 
    }); 

पहिया उपकरणों के लिए, डेल्टा तुलना

(e.wheelDeltaY/3 || -e.deltaY) 
(e.wheelDeltaX/3 || -e.deltaX)