解决 弹出层冒泡滚动问题

demo样式:

<style>
    	*{max-width: 100%;}
    	.popScrollEle{position: fixed;bottom:0;left:0;background:#ccc;width:100%;height:30%;overflow: auto;}
</style>

　　demo  html:

<div class="wrapper">
		<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"/>
		<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"/>
		<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"/>
		<img src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/home/img/qrcode/zbios_efde696.png"/>		
	</div>
	<div class="popScrollEle">
		<pre>
			再别康桥
			轻轻地，我走了，
			正如我轻轻地来，
			我轻轻的招手，
			作别西天的云彩，
			
			那河畔的金柳，
			是天上的虹，
			揉碎再浮藻间，
			沉淀着彩虹似的梦再别康桥
			轻轻地，我走了，
			正如我轻轻地来，
			我轻轻的招手，
			作别西天的云彩，
			
			那河畔的金柳，
			是天上的虹，
			揉碎再浮藻间，
			沉淀着彩虹似的梦
			再别康桥
			轻轻地，我走了，
			正如我轻轻地来，
			我轻轻的招手，
			作别西天的云彩，
			
			那河畔的金柳，
			是天上的虹，
			揉碎再浮藻间，
			沉淀着彩虹似的梦再别康桥
			轻轻地，我走了，
			正如我轻轻地来，
			我轻轻的招手，
			作别西天的云彩，
			
			那河畔的金柳，
			是天上的虹，
			揉碎再浮藻间，
			沉淀着彩虹似的梦
		</pre>
	</div>

　　

　　javascript:

//解决 弹出层冒泡滚动问题
$.fn.extend({
	"preventScroll":function(){		
		$(this).each(function(){
			var _this = this;
			if(navigator.userAgent.indexOf('Firefox') >= 0){   //firefox
				_this.addEventListener('DOMMouseScroll',function(e){
					_this.scrollTop += e.detail > 0 ? 60 : -60;   
					e.preventDefault();
				},false); 
			}else{
				var startY=endY=scrollTop=0;
				var preventStart=false;
				_this.addEventListener('touchstart',function(e){
					preventStart=true;
					scrollTop=_this.scrollTop;
					var touch = event.targetTouches[0];
					startY=touch.pageY;
					e.preventDefault();
				});
				_this.addEventListener('touchmove',function(e){
					if(!preventStart) return;
					var touch = event.targetTouches[0];
					endY=touch.pageY;					
					_this.scrollTop = scrollTop+(endY-startY)*-1;
					e.preventDefault();
				});
				_this.addEventListener('touchend',function(){
					preventStart=false;
				});
				_this.onmousewheel = function(e){   
					e = e || window.event;   
					_this.scrollTop += e.wheelDelta > 0 ? -60 : 60;   
					return false;
				};
			}
		})	
	}
});

$(".popScrollEle").preventScroll();

　　

转载于:https://www.cnblogs.com/litterfour/p/6656983.html