1. 程式人生 > >兩層滾動條互補幹擾

兩層滾動條互補幹擾

layer 頂部 details images 阻止 tor listener 技術分享 webkit

技術分享

滾動內層列表時,速度過快,會導致外層也滾動,影響用戶體驗

解決辦法 一 :鼠標內層時,禁用外層滾動條

  <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‘);

兩層滾動條互補幹擾