JavaScript禁止微信浏览器下拉回弹效果

本文实例为大家分享了JavaScript禁止微信浏览器下拉回弹的效果

方法1：

         < script type= "text/javascript" >

            var overscroll = function(el){

                 el. addEventListener( 'touchstart', function(){

                 var top = el. scrollTop;

                 var totalScroll = el. scrollHeight;

                 var currentScroll = top + el. offsetHeight;

                 if( top === 0) {

                     el. scrollTop = 1;

                } else if( currentScroll === totalScroll){

                     el. scrollTop = top - 1;

                }

                });

                 el. addEventListener( 'touchmove', function( evt){

                 if( el. offsetHeight < el. scrollHeight){

                     evt. _isScroller = true;

                }

                });

            }

            overscroll(document.querySelector('.scroll'));//哪里需要可以局部滚动，添加一个“scroll”的class

            document.body.addEventListener('touchmove', function(evt) {

                 if(! evt. _isScroller){

                evt.p reventDefault();

                }

            });

         </ script >

此方法的优缺点：
优点：支持局部滚动；
缺点：浏览器本身超出页面出现的滚动被禁用掉了，需要改为局部滚动，且局部滚动的地方需要加“scroll”的class。
注： 如果同一个页面多个局部滚动，需要将
overscroll(document.querySelector('.scroll');
改为
for(var i=0;i<document.querySelectorAll('.scroll').length;i++){
overscroll(document.querySelectorAll('.scroll')[i]);
}

方法2：

         < script type= "text/javascript" >

            function stopDrop(){

                 var lastY; //最后一次y坐标点

                 $( document. body). on( 'touchstart', function( event) {

                 lastY = event. originalEvent. changedTouches[ 0]. clientY; //点击屏幕时记录最后一次Y度坐标。

                });

                 $( document. body). on( 'touchmove', function( event) {

                 var y = event. originalEvent. changedTouches[ 0]. clientY;

                 var st = $( this). scrollTop(); //滚动条高度

                 if ( y >= lastY && st <= 10) { //如果滚动条高度小于0，可以理解为到顶了，且是下拉情况下，阻止touchmove事件。

                     lastY = y;

                     event. preventDefault();

                }

                 lastY = y;

                });

            }

         </ script >

此方法的优缺点：
优点：支持浏览器本身超出页面的滚动
缺点：不支持局部滚动