Click on the scroll penetration of mobile terminal solutions

 Click penetration:

　　Are generally mixed due to touch and click, touch is immediately triggered, touchend will trigger a click, click leads to the upper element touchend trigger will affect the underlying elements.  

　　Solution: only touch or only with a click; use some fastclick and other custom tap event, click the event that triggered the removal after touchend.

 

Scroll penetration:

　　On the pop open mask layer or rolling, the rolling body element can affect the lower layer. Experience is very bad.

　　Solution in playing block or open when the mask layer, the acquired HTML scrollTop, positioned fixed to a body, top scrollTop value is negative value. Close popup box when the fixed positioning removed. Restore scrollTop value.

 

　　　

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