移動端點擊滾動穿透的解決方案

時間 2020-05-25

標籤移動點擊滾動穿透解決方案欄目無線简体版

原文原文鏈接

點擊穿透：

　　通常都是touch和click混用致使的， touch是立馬觸發的，touchend還會觸發一次click，致使上層元素touchend觸發的click會影響到下層元素。 html

　　解決辦法：只用touch 或者只用click ；使用fastclick 等一些自定義tap事件，移除touchend以後觸發的那次click事件。spa

滾動穿透：

　　在打開的彈窗或者遮罩層上滾動，會影響到下層的body元素的滾動。體驗很很差。code

　　解決辦法，在打開彈框或遮罩層的時候，獲取html的scrollTop，給body改成fixed定位， top值爲負的scrollTop值。關閉彈框的時候，把fixed定位去掉。還原scrollTop值。htm

<style> .stopBodyScroll { position:fixed; bottom: 0; left: 0; right: 0;
     }
</style>


<script>

    function stopBodyScroll() { var scrollTop = document.documentElement.scrollTop; document.body.classList.add('stopBodyScroll'); document.body.style.top = `-${scrollTop}px`; } function openBodyScroll() { var top = document.body.style.top; document.body.style.top = 'auto'; document.body.classList.remove('bodyFixed'); document.documentElement.scrollTop = Math.abs(parseInt(top)); } </script>