元素滚动到底部或顶部时阻止body滚动

移动端的弹窗内容有滚动条，滚动到底部或顶部时或影响弹窗下的body滚动，某些浏览器滚动到顶部时不松手就触发了刷新页面的情况，如果不需要这样的默认体验，就需要加一下判断了。

var startX,startY,endX,endY,distanceX,distanceY;//判断容器的滑动方向
      //判断元素滑到底部时阻止滑动body,使用时传入局部滚动的选择器即可
      function smartScroll(ele){
        $(ele).on("touchstart", function (e) {
          startX = e.originalEvent.changedTouches[0].pageX;
          startY = e.originalEvent.changedTouches[0].pageY;
      });

      $(ele).on("touchmove", function (e) {
          //获取滑动屏幕时的X,Y
          endX = e.originalEvent.changedTouches[0].pageX;
          endY = e.originalEvent.changedTouches[0].pageY;
          //获取滑动距离
          distanceX = endX - startX;
          distanceY = endY - startY;
          var scrollHeight = this.scrollHeight;
          var height = this.offsetHeight;
          var scrollTop = this.scrollTop;


          //判断滑动方向
          if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX > 0) {
              //layer.msg('往右滑动');
          } else if (Math.abs(distanceX) > Math.abs(distanceY) && distanceX < 0) {
              //layer.msg('往左滑动');
          } else
          if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY < 0) {
              //layer.msg('往上滑动');
              if(scrollHeight - height == scrollTop){
                //layer.msg("bottom")
                event.preventDefault();
                return;
             }else{
                e.stopPropagation();
             }
          } else if (Math.abs(distanceX) < Math.abs(distanceY) && distanceY > 0) {
              //layer.msg('往下滑动');
            if(this.scrollTop == 0){
                //layer.msg("top")
                event.preventDefault();
                return;
             }else{
                e.stopPropagation();
             }
          }
      })
    }

 

另外有种情况就是layer这样的弹出层占100%高度的，当layer滚动到底部时会影响下面的body滚动，需要在layer弹框时记住之前body的滚动位置，关闭layer弹窗时再恢复原来的高度

 var scrollTop = 0;
        function disabledBakePage(arg){
            $("#top_header2 a.back_a").addClass("prevent-none");
            if(arg){
                scrollTop = 0;
            }else{
                scrollTop = getScrollTop();//记住当前的位置
            }
            $("body").addClass("no-scroll");
            $(window).scrollTop(0);//解决浏览器地址栏遮住绝对定位或固定定位弹窗顶部的问题
            $("#patient_list_wrap").addClass("opacity-0");

        }
        function abledBakePage(){
            $("body").removeClass("no-scroll");
            $(window).scrollTop(scrollTop);//恢复原来的位置
            $("#patient_list_wrap").removeClass("opacity-0")
            setTimeout(function(){
                $("#top_header2 a.back_a").removeClass("prevent-none")
            },300)

        }
        function getScrollTop(){
            var scrollTop = window.pageYOffset
            || document.documentElement.scrollTop
            || document.body.scrollTop
            || 0;
            return scrollTop;
        }

       //*********以下是获取键盘弹起时窗口的高度，可以供参考***********
       // 通过键盘弹起事件获取
       $("document").on('keyup', function (e) {
            layer.msg(e.height)
        })
        // 键盘收起事件
        $("document").on('keydown', function (e) {
            layer.msg(e.height) // 0
        }) 
         function showHeight(){
            var bodyClientHeight = document.body.clientHeight //==> BODY对象高度
            var documentElementClientHeight  = document.documentElement.clientHeight //==> 可见区域高度
            var bodyClientHeight = document.body.clientHeight //==> 网页可见区域高
            var offsetHeight = document.body.offsetHeight //==> 网页可见区域高(包括边线的高)
            var bodyScrollHeight = document.body.scrollHeight //==> 网页正文全文高
            var bodyScrollTop = document.body.scrollTop //==> 网页被卷去的高
            var screenTop = window.screenTop //==> 网页正文部分上
            var screenHeight = window.screen.height //==> 屏幕分辨率的高
            var screenAvailHeight = window.screen.availHeight //==> 屏幕可用工作区高度
            var info = '<p>bodyClientHeight:&nbsp;'+bodyClientHeight+'</p><p>documentElementClientHeight:&nbsp;'+documentElementClientHeight+'</p><p>bodyClientHeight:&nbsp;'+bodyClientHeight+'</p><p>offsetHeight:&nbsp;'+offsetHeight+'</p><p>bodyScrollHeight:&nbsp;'+bodyScrollHeight+'</p><p>bodyScrollTop:&nbsp;'+bodyScrollTop+'</p><p>screenTop:&nbsp;'+screenTop+'</p><p>screenHeight:&nbsp;'+screenHeight+'</p><p>screenAvailHeight:&nbsp;'+screenAvailHeight+'</p>';
            layer.msg(info, {
              icon: 1,
              time: 3000 //2秒关闭（如果不配置，默认是3秒）
            }, function(){
              //do something
            });
        }