Zezwalaj na przesuwanie w pionie elementów potomnych i przewijanie w poziomie w poziomie na elemencie nadrzędnym przy użyciu jQuery

Question

Mam element zawierający grupę kolumn. Na urządzeniu dotykowym kolumny powinny być w stanie przewijać w górę iw dół za pomocą zdarzenia dotykowego. Przesuwając od lewej do prawej/od prawej do lewej, potrzebuję elementu nadrzędnego/kontenera do przewijania w poziomie.

Problem, który napotykam, polega na tym, że za każdym razem, gdy spróbujesz dotknąć/przewinąć w jednej z kolumn, nie przewijasz elementu nadrzędnego w poziomie. Jak to osiągnąć?

Używam wtyczki jQuery Perfect Scrollbar.

CodePen (powinny być testowane na urządzeniu dotykowym)

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 wydaje się działać p roperly na moim telefonie.

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

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

Oczywiście można zmieniać sama biblioteka wspierać fragment alternatywnego elementu przewijania tak, nie trzeba korzystać z biblioteki dwukrotnie. To może trochę więcej czasu, ale jesteś gotów zainwestować.