您的位置：首页 > 移动开发

移动端 js 弹出层内容滚动的时候，不影响body的滚动条处理

2016-05-02 13:19 781 查看

如标题所示，这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发，自己重写了一下代码

效果图：

代码：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>移动端->弹出层内容滚动的时候，不影响body的滚动条处理</title>
<style>
*{
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 自带滚动条不平滑解决方法 */

}

</style>
</head>
<body>

body层

<div class="mark">
<div class="layerNode">
<p>弹出层 start</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>测试</p>
<p>弹出层 end</p>
</div>
</div>

<script type="text/javascript">

//弹出层滚动条不影响到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');

</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航