Alt öğelerdeki dikey kaydırmaya izin ver ve yatay kaydırma, jQuery

Question

'u kullanarak üst öğenin yan yana kayar. Bir dizi sütun içeren bir öğem var. Bir dokunmatik cihazda, sütunlar dokunma olayını kullanarak yukarı ve aşağı doğru kayabilmelidir. Soldan sağa/sağdan sola doğru kaydırırken, yatay olarak kaydırmak için ana öğeye/kabına ihtiyacım var.

Şu an çalıştığım sorun, sütunlardan birine dokunmaya/kaydırmaya çalıştığınızda, ana öğeyi yatay olarak kaydırmıyor olmasıdır. Bu nasıl yapılabilir?

jQuery Perfect Scrollbar eklentisini kullanıyorum.

CodePen (dokunmatik cihazda test edilmelidir)

HTML

<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> 

CSS

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 p iş gibi görünüyor telefonumda roperly. bir iki defa kütüphaneyi kullanmak zorunda değildir bu yüzden Tabii

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

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

, tek alternatif kaydırma elemanının geçişini desteklemek için kütüphane kendisi değiştirebilir. Bununla birlikte, yatırım yapmaya istekli olduğunuz biraz daha uzun bir zaman olabilir.