看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到body区滚动
什么意思呢？
看个图片，一般正常弹窗是有宽高限制的，如果内容过长则直接在弹窗中进行滚动
将滚动位置放到整个body中，让弹窗中内容自适应高度
这么做的好处自然很明显，body区域有更大的可视区域，来看看最后的效果
那具体是怎么实现呢
其实不算很难，各位看官可以先想一想能怎么搞
首先，得先弄一个基本的弹窗逻辑，为了简单，就直接操作了。可以自行封装
写个HTML结构
<button class="show-big-img" data-h="300">查看大图 h300</button>
<button class="show-big-img" data-h="3000">查看大图 h3000</button> <div class="layer-shade"></div>
<div class="layer-wrap">
<a href="javascript:;" class="layer-close">×</a>
<div class="layer-content">
<p class="show-origin-img">
<a href="javascript:;">查看原图</a>
</p>
<div class="big-img">
<div class="big-img__item">我是图片</div>
</div>
</div>
</div>
将 layer-shade 看作遮罩，将 layer-wrap看作弹窗，将 layer-content 看作弹窗内容区，将 big-img__item 看作这里的长图片（长内容）
把样式写好
body {
&.layer-scroll-in-body {
overflow: hidden;
}
}
.layer-shade {
display: none;
position: fixed;
width: 100%;
height: 100%;
top:;
left:;
background-color: #000;
opacity: .15;
&.visible {
display: block;
}
}
@keyframes bounceIn {
to {
opacity:;
transform: scale(1);
}
}
.layer-wrap {
display: none;
z-index:;
position: fixed;
width: 70%;
height: 50%;
top: 100px;
left: 100px;
background-color: #000;
border-radius: 3px;
opacity:;
transform: scale(.3);
&.visible {
display: block;
animation: bounceIn .5s;
animation-fill-mode: both;
}
&.layer-scroll-in-body {
position: absolute;
height: auto;
}
&__wrapper {
overflow: auto;
position: fixed;
top:;
right:;
width: 100%;
height: 100%;
}
}
.layer-close {
position: absolute;
top: -16px;
right: -12px;
width: 24px;
height: 24px;
text-decoration: none;
color: #fff;
background: #999;
border-radius: 50%;
border: 3px solid #fff;
text-align: center;
line-height: 22px;
font-size: 22px;
&:hover {
background-color: #358eea;
}
}
.layer-content {
height: 100%;
overflow: auto;
}
.show-origin-img {
position: absolute;
top: 5px;
right: 20px;
font-size: 12px;
a {
color: #fff;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
}
.big-img {
display: flex;
justify-content: center;
box-sizing: border-box;
padding: 20px;
&__item {
display: flex;
justify-content: center;
align-items: center;
max-width: 100%;
width: 300px;
height: 3000px;
background-color: #c7bdb3;
}
}
最后加上JS操作逻辑
// 显示弹窗
function showLayer(onShow, onClose) {
var $body = $('body'),
$layerShade = $('.layer-shade'),
$layerWrap = $('.layer-wrap'); // 查看大图
$('.show-big-img').click(function() {
$layerWrap.find('.big-img__item').css('height', $(this).attr('data-h')); // 显示前处理
if (onShow && typeof onShow === 'function') {
onShow($body, $layerWrap);
} $layerShade.addClass('visible');
$layerWrap.addClass('visible');
}); $('.layer-close').click(function() {
// 关闭前处理
if (onClose && typeof onClose === 'function') {
onClose($body, $layerWrap);
} $layerShade.removeClass('visible');
$layerWrap.removeClass('visible');
});
} // 显示弹窗，并设置弹窗内容滚动区为body区
function showLayerScrollInBody(setPageScroll) {
// 模拟：确保显示弹窗前页面由垂直方向滚动条
setPageScroll && $('.show-big-img').css('margin-bottom', 2000); showLayer(function($body, $layer) {
// body设置 overflow: hidden
$body.addClass('layer-scroll-in-body'); $layer
.addClass('layer-scroll-in-body')
// 弹出层增加一层父级
.wrap('<div class="layer-wrap__wrapper">');
}, function($body, $layer) {
// 关闭弹窗，则恢复
$body.removeClass('layer-scroll-in-body'); $layer
.removeClass('layer-scroll-in-body')
.unwrap();
});
} showLayer(); /* showLayerScrollInBody(); */ /* showLayerScrollInBody(true); */
代码不算太复杂，如果到这里为止已经看懂的话，应该不需要再往下看了
一般的弹窗实现，需要设置遮罩层和弹窗的position为fixed，才能更好地保证页面有滚动条的时候位置不会出错。
fixed之后，弹窗的最大高度为视窗高度，若要使得弹窗的内容区直接显示出来，就必须设置为非fixed值，而弹窗不能少了定位，那就只能使用 absolute值了
但设置了absolute就无法计算页面有滚动条的时候的位置，所以需要给弹窗包裹一层父级，设置为fixed，则弹窗基于此父级来定位，相应的 top 和 left 值无需改变
$layer.wrap('<div class="layer-wrap__wrapper">');
&__wrapper {
overflow: auto;
position: fixed;
top:;
right:;
width: 100%;
height: 100%;
}
原先弹窗是设置了高度的，所以需要进行重置。推荐使用css类名来切换，方便维护
$layer.addClass('layer-scroll-in-body')
&.layer-scroll-in-body {
position: absolute;
height: auto;
}
在页面有滚动条的时候，还要注意页面的滚动条会不会和弹窗中的滚动条产生冲突，如
所以需要给body设置
$body.addClass('layer-scroll-in-body');
body {
&.layer-scroll-in-body {
overflow: hidden;
}
}
最后，记得在弹窗关闭的时候，还原相关的更改即可