`

JS弹出遮罩层后底部页面不滚动

    博客分类:
  • JS
JS 
阅读更多

        做的一个项目:点击按钮时,弹出遮罩层,底层变灰色不透明。而这这个遮罩层因为内容很多,所以加了一个内部滚动条。

        现在的问题就是:当我用内部滚动条翻阅遮罩层更多内容的时候,底部页面的滚动条也会跟着一起动。

        目前解决如下:

<div class="index" 
onclick="document.getElementById('wxts').style.display='block';
document.body.style.scrollTop=0">
</div>

 

分享到:
评论

相关推荐

    弹框后禁止遮罩层后面页面滚动(兼容ios和android).zip

    "弹框后禁止遮罩层后面页面滚动(兼容ios和android)"这个主题涉及到的是一个常见的问题,即当弹出一个对话框或者遮罩层时,如何防止用户在遮罩层下继续滚动页面。这个问题在iOS和Android平台上表现不同,需要特定的...

    解决移动端滚动穿透问题

    当弹出遮罩层时,我们希望通过CSS来禁用页面的滚动功能,但仅仅设置`body { overflow: hidden; }`并不足够,因为这会影响到整个页面,包括遮罩层本身。因此,我们需要一种方法来区分主体内容与遮罩层的滚动状态。 ...

    JS弹出层遮罩,隐藏背景页面滚动条细节优化分析

    一、去除滚动条方法 ...body或html去掉滚动条后,页面会有一个滚动条宽度/2的跳动!这个跳动对用户体验来十分不好,因此给body添加一下右padding,大小为滚动条的宽度。windows平台下滚动条的宽度为17px,linux平

    用js生成dom并实现弹出层效果

    在实际应用中,可能还会涉及其他功能,如防止页面滚动、关闭按钮、遮罩层等。标签“源码”和“工具”暗示博客可能包含了具体的示例代码和实用技巧,帮助读者理解并实践这一过程。 由于没有提供博客的具体内容,以上...

    始终居于网页底部可展开关闭的左右全屏滚动图

    在网页设计中,创建一个始终位于页面底部且可以展开关闭的左右全屏滚动图是一种常见的交互元素,尤其适用于展示广告或重要信息。这样的设计能够吸引用户的注意力,同时提供良好的用户体验。接下来,我们将深入探讨...

    js十種彈跳視窗

    10. **浮动通知**:此类弹出层通常出现在页面顶部或底部,用于实时通知或消息推送,例如在线聊天、系统通知等。 在“jquery实现十种弹出层效果”这个压缩包中,你将找到用jQuery实现的上述各种弹出层的代码示例。...

    原生js实现弹出层效果

    首先,实现遮罩层(通常用于遮挡页面内容,仅显示弹出层内容)需要设置遮罩层的宽度和高度。这是通过JavaScript来获取页面内容区域的高度和宽度来实现的。使用`document.documentElement.scrollHeight`和`document....

    jquery layer弹出层在线聊天工具代码

    在在线聊天场景下,我们可以利用它的弹出层特性,创建一个浮动在页面上的聊天窗口,用户可以在不离开主页面的情况下进行实时交流。 首先,我们需要在项目中引入jQuery和jQuery Layer的库文件。确保在HTML头部引用了...

    滚动穿透的6种解决方案【已自测】.docx

    当遮罩层弹出并覆盖整个屏幕,下方的DOM元素仍然可以滚动,这在真机设备上尤为明显。本文将介绍6种经过测试的有效解决方案,帮助开发者应对这一挑战。 ### 解决方案一:body无滚动 + 弹层无滚动【CSS-超出隐藏】 ...

    上下拉模态弹出

    在"上下拉模态弹出"中,模态通常是一个半透明的背景层,遮罩住主界面,使用户专注于弹出的内容。这种设计能够引导用户的注意力,避免他们在浏览过程中被其他元素分散注意力。 "上下拉"的动画效果则涉及到页面滚动和...

    在vue中实现禁止屏幕滚动,禁止屏幕滑动

    在Vue.js中,有时我们需要在特定情况下禁止用户对页面的滚动操作,比如在展示全屏内容或弹出层时。本篇文章将详细讲解如何在Vue中实现禁止屏幕滚动和滑动的功能。 首先,禁止屏幕滚动的基本思路是通过监听并阻止...

    Layout API 帮助文档

    - 定义弹出层底部按钮的文本。 - 示例:`btn: ['确定', '取消']` 9. **closeBtn - 关闭按钮** - 类型:Boolean,默认值:true - 是否显示关闭按钮。 - 示例:`closeBtn: false` 10. **shade - 遮罩层** - ...

    页面图片浮动左右滑动效果的简单实现案例

    然后,我们定义了一些隐藏的元素,如`#bg`和`#bg1`,它们是半透明黑色背景层,用于实现遮罩效果;`#bottom`是底部的导航条,包含上一张(prev)、下一张(next)和关闭(close)按钮;`#frame`是图片框,用于显示...

    js简单实现删除记录时的提示效果

    这个简单的实现提供了一个基本的交互式提示框,当用户尝试删除记录时,会弹出一个带有确认和取消选项的对话框。这种功能在很多Web应用中都很常见,可以避免用户意外地删除数据,提高用户体验。通过自定义CSS和调整...

    批量上传图片+lightbox+图片评论+gridview自定义分页控件

    Lightbox是一种常见的图片预览技术,当用户点击图片链接时,会在当前页面上弹出一个半透明的遮罩层,显示放大的图片。它通常使用JavaScript库如Fancybox、Magnific Popup或Bootstrap的Modal组件实现。这种效果提供了...

    Boostrap基础教程之JavaScript插件篇

    与提示框类似,弹出框提供了一个浮动层,用于显示更多的内容。使用data-toggle="popover"属性,可以给元素添加弹出功能,可以自定义标题和内容。 7. 警告框(Alert) 警告框组件用于显示警告信息,通常用于对用户的...

    project_food

    通过监听用户的特定操作(如点击按钮),可以触发模态窗口的显示,并可能包含关闭按钮或遮罩层,以便用户可以关闭窗口。 【滚动和打开时的模态窗口修改】 项目中可能运用了JavaScript监听页面滚动事件,当用户滚动...

    Vux 前端文档

    - **Popup 弹出层**:实现各种弹出窗口功能。 - **Sticky 自动固定在顶部**:让元素在滚动时固定在顶部。 - **Tabbar 底部导航**:常用于移动应用的底部导航栏。 - **Button Tab**:具有按钮样式的选项卡组件。 ...

Global site tag (gtag.js) - Google Analytics