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

最新推荐文章于 2023-10-22 17:04:50 发布

程序员一木

最新推荐文章于 2023-10-22 17:04:50 发布

阅读量379

点赞数

分类专栏：前端程序员互联网 IT 编程文章标签：前端编程 IT 互联网程序员

本文链接：https://blog.csdn.net/tzllxya/article/details/92671569

版权

该博客介绍了如何在弹窗查看内容时，将滚动条设置在body区域，以提供更大的可视区域。通过调整HTML结构，设置CSS样式和使用JavaScript操作逻辑，实现了弹窗内容自适应高度的效果，避免了弹窗内部滚动条与页面滚动条的冲突。在弹窗关闭时，还会还原相关更改。

摘要由CSDN通过智能技术生成

弹窗查看内容时内容滚动区域设置为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-