码迷,mamicode.com
首页 > 其他好文 > 详细

两层滚动条互补干扰

时间:2017-07-05 21:16:32      阅读:168      评论:0      收藏:0      [点我收藏+]

标签:解决方法   ati   解决   node   his   ima   lis   nbsp   body   

技术分享

 

滚动内层列表时,速度过快,会导致外层也滚动,影响用户体验

解决办法 一 :鼠标内层时,禁用外层滚动条

  <div class="zoneDetails-content blockStyle-content layerScroll" 
onmousewheel
="return divScroll(event,this)"> </div>

 

  divScroll:function(event,scroller){
    var k = event.wheelDelta? event.wheelDelta:-event.detail*10;
    scroller.scrollTop = scroller.scrollTop - k;
    return false;
  },

 

解决办法 二:鼠标滚动到顶部/底部时,再出发外层滚动条

*{margin:0;padding:0;}
body{height:1500px;}
.mark{width:100%;height:100%;background:rgba(0,0,0,.5);position:fixed;left:0;top:0;}
.layerNode{width:200px;height:200px;left:50%;top:50%;margin-left:-100px;margin-top:-100px;
background-color:#fff;position: absolute;overflow-y:scroll;-webkit-overflow-scrolling : touch; /* ios 自带滚动条不平滑解决方法 */ }
<div class="mark">
  <div class="layerNode">
    <p>弹出层 start</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
    <p>测试</p>
。。。
<p>弹出层 end</p> </div> </div>
  //弹出层滚动条不影响到body [layerNode:需要滚动的元素]
  var DivScroll = function( layerNode ){
    //如果没有这个元素的话,那么将不再执行下去
    if ( !document.querySelector( layerNode ) ) return ;

    this.popupLayer = document.querySelector( layerNode ) ;
    this.startX = 0 ;
    this.startY = 0 ;

    this.popupLayer.addEventListener(‘touchstart‘, function (e) {
      this.startX = e.changedTouches[0].pageX;
      this.startY = e.changedTouches[0].pageY;
    }, false);

    // 仿innerScroll方法
    this.popupLayer.addEventListener(‘touchmove‘, function (e) {

      e.stopPropagation();

      var deltaX = e.changedTouches[0].pageX - this.startX;
      var deltaY = e.changedTouches[0].pageY - this.startY;

      // 只能纵向滚
      if(Math.abs(deltaY) < Math.abs(deltaX)){
        e.preventDefault();
        return false;
      }

      if( this.offsetHeight + this.scrollTop >= this.scrollHeight){
        if(deltaY < 0) {
          e.preventDefault();
          return false;
        }
      }
      if(this.scrollTop === 0){
        if(deltaY > 0) {
          e.preventDefault();
          return false;
        }
      }
      // 会阻止原生滚动
      // return false;
    },false);

  }

  //调用
  var divScroll = new DivScroll(‘.layerNode‘);

 

两层滚动条互补干扰

标签:解决方法   ati   解决   node   his   ima   lis   nbsp   body   

原文地址:http://www.cnblogs.com/mudeng-007/p/7123188.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!