jQuery तत्वों पर क्षैतिज स्वाइपिंग की अनुमति दें और क्षैतिज स्वाइपिंग स्क्रॉल को jQuery

Question

का उपयोग करके पैरेंट तत्व पर साइड-टू-साइड की अनुमति दें मेरे पास एक तत्व है जिसमें स्तंभों का एक गुच्छा शामिल है। टच डिवाइस पर, कॉलम स्पर्श ईवेंट का उपयोग करके ऊपर और नीचे स्क्रॉल करने में सक्षम होना चाहिए। बाएं से दाएं/दाएं से बाएं स्वाइप करते समय, मुझे क्षैतिज स्क्रॉल करने के लिए मूल तत्व/कंटेनर की आवश्यकता होती है।

जो समस्या मैं अभी चल रहा हूं वह यह है कि जब भी आप कॉलम में से किसी एक को स्पर्श/स्क्रॉल करने का प्रयास करते हैं, तो यह क्षैतिज रूप से मूल तत्व को स्क्रॉल नहीं करता है। इसे किस तरह पूर्ण कर सकते है?

मैं jQuery Perfect Scrollbar प्लग-इन का उपयोग कर रहा हूं।

CodePen (एक स्पर्श डिवाइस पर परीक्षण किया जाना चाहिए)

एचटीएमएल

<main> 
    <section class="red"> 
    <p>Content...</p> 
    </section> 
    <section class="green"> 
    <p>Content...</p> 
    </section> 
    <section class="blue"> 
    <p>Content...</p> 
    </section> 
    <section class="yellow"> 
    <p>Content...</p> 
    </section> 
</main> 

सीएसएस

main { 
    height: 300px; 
    overflow-y: hidden; 
    position: relative; 
    white-space: nowrap; 
} 

section { 
    display: inline-block; 
    overflow: hidden; 
    position: relative; 
    vertical-align: top; 
    white-space: normal; 
    height: 300px; 
} 

p { 
    padding: 1em 2em; 
    width: 300px; 
} 

jQuery

$('section').perfectScrollbar(); 

Answer 1

This पी काम करने के लिए लगता है मेरे फोन पर roperly।

$('section').perfectScrollbar({ 
    suppressScrollX: true 
}); 

$('main').perfectScrollbar({ 
    suppressScrollY: true 
}); 

बेशक

, एक एक वैकल्पिक स्क्रॉल तत्व के पारित होने का समर्थन करने के पुस्तकालय में ही बदल सकता है इसलिए एक पुस्तकालय दो बार उपयोग करने के लिए नहीं है। हालांकि, यह थोड़ा और समय हो सकता है कि आप निवेश करने के इच्छुक हैं।