妹的，移动弹出浮层后，想滚动浮层内部的内容。可是发现html也跟着滚不可理喻，可恶的是 chrome 测试是没问题的。。。。。经过几番折腾 最终还是实现了产品的要求。不过安卓上貌似还有点小问题 导致html微微蠕动。将就的使吧。
来吧来吧 废话少说 上源码 代码比较菜啊。欢迎大家喷我 实现原理 借鉴了 大神 张鑫旭的案例；
style
//遮罩层
.POI--slide-summary.slide__content__bg {
background:rgba(0,0,0,.3);
display: none;
height: 100%;
position: fixed;
top:0;
left:0;
width:100%;
z-index: 11;
}
.POI--slide-summary .slide__content {
position: absolute;
bottom:0;
width:100%;
}
.POI--slide-summary .slide__title {
background: rgba(86,94,106,0.50);
color:#fff;
font-size:14px;
height: 44px;
line-height: 44px;
text-align:center;
}
.POI--slide-summary .slide__text {
background:#fff;
color: #565E6A;
font-size: 14px;
height: 220px;
line-height: 1.2;
overflow-y:scroll;
padding:20px 15px;
}
.POI--slide-summary .slide__map {
height: 200px;
overflow: hidden;
}
.POI--slide-summary .slide__map img {
transform: scale(2)
}
.POI--slide-summary .slide__close {
background: #F9FAFC;
color: #A1ABBC;
font-size:16px;
height: 44px;
line-height: 44px;
text-align:center;
}
.POI--slide-summary.POI--slide-list .slide__list {
background:#fff;
height: 160px;
overflow-y:scroll;
padding:20px 15px;
}
.POI--slide-summary.POI--slide-list .slide__list li {
color: #565E6A;
font-size: 14px;
height: 26px;
line-height: 26px;
text-align: center;
}
.POI--slide-summary.POI--slide-list .slide__list li.current {
color:#EF4B4B
}
<div class="btns">
<button id="showHour">营业时间</button>
<button id="showSummary">详情简介</button>
<button id="showMap">地图</button>
</div>
<div style="height: 200px;background:blue;"></div>
<div style="height: 200px;background:green;"></div>
<div style="height: 200px;background:yellow;"></div>
<div style="height: 200px;background:black;"></div>
<div style="height: 200px;background:white;"></div>
<!-- begin 遮罩层 -->
<div id="showSummary-con" class="POI--slide-summary slide__content__bg">
<div class="slide__content">
<div class="slide__title">详情简介</div>
<div class="slide__text scroll__con">
这里是详情简介，一兰拉面在日本猪骨拉面中首屈一指，创业五十多年来以天然的猪骨汤、特制的面条、秘传的作料酱汁而闻名，店铺从发源地福冈覆盖到小半个日本，在香港铜锣湾也有其连锁店，可见人气非同一般。除了拉面本身的味道较其他拉面好吃之外，吃面过程中不会受任何人打扰的环境也是受欢迎的原因之一。而且为了照顾来日本旅行的外国游客，有中日英等各种语言的菜单，分类详细到拉面的分量、软硬程度、汤底的浓度、油腻度等，可以选到最适合自己口味的拉面。
这里是详情简介，一兰拉面在日本猪骨拉面中首屈一指，创业五十多年来以天然的猪骨汤、特制的面条、秘传的作料酱汁而闻名，店铺从发源地福冈覆盖到小半个日本，在香港铜锣湾也有其连锁店，可见人气非同一般。除了拉面本身的味道较其他拉面好吃之外，吃面过程中不会受任何人打扰的环境也是受欢迎的原因之一。而且为了照顾来日本旅行的外国游客，有中日英等各种语言的菜单，分类详细到拉面的分量、软硬程度、汤底的浓度、油腻度等，可以选到最适合自己口味的拉面。
这里是详情简介，一兰拉面在日本猪骨拉面中首屈一指，创业五十多年来以天然的猪骨汤、特制的面条、秘传的作料酱汁而闻名，店铺从发源地福冈覆盖到小半个日本，在香港铜锣湾也有其连锁店，可见人气非同一般。除了拉面本身的味道较其他拉面好吃之外，吃面过程中不会受任何人打扰的环境也是受欢迎的原因之一。而且为了照顾来日本旅行的外国游客，有中日英等各种语言的菜单，分类详细到拉面的分量、软硬程度、汤底的浓度、油腻度等，可以选到最适合自己口味的拉面。
</div>
<div class="slide__close">关闭简介</div>
</div>
</div>
<div id="showHour-con" class="POI--slide-summary POI--slide-list slide__content__bg">
<div class="slide__content">
<div class="slide__title">营业时间</div>
<ul class="slide__list scroll__con">
<li>星期一 00:00-23:00</li>
<li class="current">星期二 停业</li>
<li>星期三 00:00-23:00</li>
<li>星期四 00:00-23:00</li>
<li>星期五 00:00-23:00</li>
<li>星期六 00:00-23:00</li>
<li>星期日 00:00-23:00</li>
</ul>
<div class="slide__close">关闭营业时间</div>
</div>
</div>
<!-- end 遮罩层 -->
script
//遮罩层内部滚动
$.smartScroll = function(container, selectorScrollable) {
if (!selectorScrollable || container.data('isBindScroll')) {
return;
}
var isSBBrowser;
var data = {
reg : /scroll__con$/,
isScroll:true,
maxscroll: 0
};
container.on({
touchstart: function () {
var elScroll = event.target;
var events = event.touches[0] || event;
data.elScroll = elScroll;
data.posY = events.pageY;//滑动触发时的起始值
data.maxscroll = elScroll.scrollHeight - elScroll.clientHeight;//最大滚动值
},
touchmove: function () {
try{
var events = event.touches[0] || event;
var elScrollY = data.elScroll.scrollTop;
var distanceY = events.pageY - data.posY;
//滑动结束值 减去 滑动起始值，用来判断滑动方向
if(!data.elScroll.className.match(data.reg) || data.maxscroll <= 0 ){
event.preventDefault();
return;
}
//向上 是否滑倒了上边界就是这里有点小问题不过可接受
if (distanceY > 0 && elScrollY == 0) {
event.preventDefault();
return;
}
// 向下是否滑到了下边界就是这里有点小问题不过可接受
if (distanceY < 0 && (elScrollY + 1 >= data.maxscroll)) {
event.preventDefault();
return;
}
}catch(e){
console.log(e);
}
},
touchend: function () {
data.maxscroll = 0;
}
});
container.data('isBindScroll', true);
};
var showBox = function(dom,$html,container,selectorScrollable){
$('#'+ dom +'-con').show().css('z-index','11');
$html.addClass('noscroll');
$.smartScroll(container,selectorScrollable)
}
var fnSlide = function(){
var $btn = $('.btns'),
$sBtn = $('#showSummary-con'),
$tBtn = $('#showHour-con'),
$mBtn = $('#showMap-con'),
container = $('.slide__content__bg'),
$html = $('html');
$btn.on('click',function(e){
showBox(e.target.id,$html,container,'.scroll__con');
});
$sBtn.on('click',function(e){
e.preventDefault();
var _this = $(this);
if(e.target.id==='showSummary-con' || e.target.className ==='slide__close'){
_this.hide();
$html.removeClass('noscroll');
}
});
$tBtn.on('click',function(e){
e.preventDefault();
var _this = $(this);
if(e.target.id==='showHour-con' || e.target.className ==='slide__close'){
_this.hide();
$html.removeClass('noscroll');
}
});
$mBtn.on('click',function(e){
e.preventDefault();
var _this = $(this);
if(e.target.id==='showMap-con' || e.target.className ==='slide__close'){
_this.hide();
$html.removeClass('noscroll');
}
});
}
fnSlide();
网友评论