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

Question

我的父元素有overflow-y：auto，而子元素有overflow-x：auto。

问题：当您在子元素上启动touchmove时，您无法同时滚动父元素。那件事只出现在IOS设备上（iphone，ipad ..）。 Android效果很好。

有什么想法吗？

Answer 1

问题解决了： 在子元素上添加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需要防止身体反弹，所以在CSS：

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

对于每个滚动元素的延迟滚动添加到css：

-webkit-overflow-scrolling: touch;

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