兩層滾動條互補幹擾
阿新 • • 發佈:2017-07-05
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‘);
兩層滾動條互補幹擾