弹窗查看内容时 内容滚动区域设置为body区

看到渣浪的查看文章或者查看大图有个效果：弹窗查看内容时，如果内容过长有滚动条，则滚动条会被放到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">&times;</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: 0;
    left: 0;
    background-color: #000;
    opacity: .15;
    
    &.visible {
        display: block;
    }
}

@keyframes bounceIn {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.layer-wrap {
    display: none;
    z-index: 1;
    position: fixed;    
    width: 70%;
    height: 50%;
    top: 100px;
    left: 100px;
    background-color: #000;
    border-radius: 3px;
    
    opacity: 0;
    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: 0;
        right: 0;
        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: 0;
        right: 0;
        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;
    }
}

 

最后，记得在弹窗关闭的时候，还原相关的更改即可