移动设备上的站点滚动（IOS）JS

Question

我的父元素带有overflow-y: auto，子元素带有overflow-x: auto。

问题：当你在子元素上开始 touchmove 时，你不能同时滚动父元素。那东西只出现在IOS设备（iphone、ipad..）上。 Android 运行良好。

有什么想法吗？

Answer 1

问题已解决： 在 child 元素上添加 eventListeners onTouchStart、onTouchMove，然后：

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

另外，IOS 需要防止 body 弹跳，所以在 CSS 中：

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

对于每个滚动元素的惰性滚动添加到 css：

-webkit-overflow-scrolling: touch;

利润！也许这个解决方案会对某人有所帮助。