两层滚动条互补干扰

Posted 2020-09-26 mudeng007

 

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

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

  <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\');