Website auf mobile Geräten (IOS) JS Scrollen

Question

Ich habe übergeordnetes Element mit Überlauf-y: Auto und Kind-Element mit Überlauf-x: auto.

Problem: Wenn Sie auf Berührungsbewegungs Kind-Elemente starten, können Sie nicht übergeordnetes Element zur gleichen Zeit blättern. Diese Sache erscheint nur auf iOS-Geräten (iPhone, iPad ..). Android funktioniert gut.

Irgendwelche Ideen?

Answer 1

Problem gelöst: auf Kind Element hinzufügen Ereignis-Listenern onTouchStart, onTouchMove, dann:

touch_start(e){ this.startY = e.touches[0].clientY; }

touch_move(e){ let parent_scroll = document.getElementsByClassName('parent')[0].scrollTop; if(e.touches[0].clientY > this.startY){ document.getElementsByClassName('parent')[0].scrollTop = parent_scroll - Math.abs(e.touches[0].clientY - this.startY); }else{ document.getElementsByClassName('parent')[0].scrollTop = parent_scroll + Math.abs(e.touches[0].clientY - this.startY); } this.startY = e.touches[0].clientY; }

Auch für IOS benötigt Körper zu verhindern prallt, so in CSS:

html, body{ position: fixed; overflow: hidden; }

Und für faulen Scroll für jedes Scrollen Element CSS hinzufügen:

-webkit-overflow-scrolling: touch;

PROFIT

! Vielleicht wird diese Lösung jemandem helfen.