web中弹出弹框后，要求滚动弹框内容时，背景元素不能滚动，关闭弹框后要求背景元素位置保持不变解决方案

大橙子Gsc

于 2019-06-28 11:22:22 发布

阅读量1.3k

点赞数 1

分类专栏：前端布局踩坑前端

本文链接：https://blog.csdn.net/weixin_43925811/article/details/93979018

版权

前端同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

前端布局踩坑

5 篇文章 0 订阅

订阅专栏

解决方案：用js动态设置body、body的子元素pageview包层的样式，代码如下：
html代码：

<body>
<div class="pageview"></div>
</body>

js/jQuery代码：

$('#dlg_btn__open').click(function () {
    // ...其他处理
    var st = $(window).scrollTop();
    $('body').css({ height: '100%', overflowY: 'hidden' }); // 背景固定
    $('.pageview').css({ position: 'fixed', top: (-1 * st) + 'px' }); // 背景固定
});
$('#dlg_btn__close').click(function () {
    // ...其他处理
    var st = $('.pageview').css('top').replace('-', '').replace('px', '');
    $('body').css({ height: 'auto', overflowY: 'visible' });// 取消背景固定
    $('.pageview').css({ position: 'relative', top: 0 });// 取消背景固定
    window.scrollTo(0, st);// 滚到原来位置
});

大橙子Gsc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web中弹出弹框后，要求滚动弹框内容时，背景元素不能滚动，关闭弹框后要求背景元素位置保持不变解决方案

解决方案：用js动态设置body、body的子元素pageview包层的样式，代码如下：html代码：<body><div class="pageview"></div></body>js/jQuery代码：$('#dlg_btn__open').click(function () { // ...其他处理 var st...
复制链接

扫一扫

专栏目录