`

阻止遮罩层后页面滚动

阅读更多

一:页面会初始化到顶端,而后静止
css代码:.ovfHiden{overflow: hidden;height: 100%;}
jquery:
$(".header_right").click(function(){$('html,body').addClass('ovfHiden'); //使网页不可滚动
   $(".searchbox").show();
 })
 $(".yg-close").click(function(){
   $('html,body').removeClass('ovfHiden'); //使网页恢复可滚
   $(".searchbox").hide();
 })

二:页面正常静止
1.打开新页面时需要禁止鼠标滚轮,禁止页面滑动;
在调用显示层时加上这句js代码就可以了:
document.documentElement.style.overflow = "hidden";
关闭层的时间别忘了在加上这句:
document.documentElement.style.overflow = "scroll";

2.设置滚轮原来位置
var top_temp = $(document).scrollTop()||document.documentElement.scrollTop || document.body.scrollTop;
window.parent.scrollTo(0,top_value);

分享到:
评论

相关推荐

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

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

    jQuery阻止移动端遮罩层后页面滚动

    在移动设备上使用遮罩层时,常常...以上就是关于“jQuery阻止移动端遮罩层后页面滚动”的知识点讲解。希望通过本文的介绍,能够帮助大家更好地理解在移动端使用遮罩层时如何有效控制页面滚动,以优化移动端的交互体验。

    用iframe做的遮罩层

    为了让遮罩层支持页面滚动,我们需要确保`<iframe>`的滚动条设置正确。可以设置`<iframe>`的`scrolling`属性为`no`,然后在外部页面中处理滚动事件。至于拖动,可以通过监听鼠标事件,计算鼠标的移动距离,然后更新`...

    js 页面全部遮罩层

    以上代码实现了基本的全屏遮罩层,包括显示和隐藏的动画效果,以及阻止页面滚动和键盘上下键的功能。在实际应用中,你可能需要根据项目需求进行更复杂的定制,例如添加自定义内容到遮罩层中,或者调整动画效果等。 ...

    vue 遮罩层阻止默认滚动事件操作

    总结一下,Vue中阻止遮罩层下的默认滚动事件主要有以下几种方式: 1. 使用Vue事件修饰符`.prevent`,如`@touchmove.prevent`。 2. 修改body的CSS样式,将`overflow`设为`hidden`。 3. 对于非Vue环境,使用...

    asp.net 遮罩层 asp.net 遮罩层

    - 检查是否有阻止遮罩层覆盖全屏的CSS样式规则,如`overflow`属性设置不当。 通过这些步骤和解决方案,可以有效地解决ASP.NET应用中的遮罩层问题,实现全屏或局部的遮罩效果。在实际开发中,还可以根据需求添加动画...

    解决移动端滚动穿透问题

    总的来说,解决移动端滚动穿透问题需要结合CSS和JavaScript,通过动态控制页面滚动和遮罩层的显示状态来实现。上述示例代码提供了一个基本的实现方案,但具体应用可能需要根据项目需求进行适当的调整和优化。

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    在本文中,我们将探讨如何利用jQuery操作DOM来实现页面上的遮罩层弹出效果,以及如何针对Web端和移动端防止遮罩层在滚动时发生滑动,从而确保用户体验的一致性和优化。 首先,让我们来看看页面遮罩层的基本概念。...

    html的遮罩层原理

    HTML的遮罩层原理是网页设计中常用的一种技术,它用于在页面上创建一个半透明或全透明的覆盖层,通常用于弹出窗口、加载提示、模态对话框等交互元素,以突出显示特定信息或者阻止用户与背景内容进行交互。...

    自定义半透明遮罩层-源码

    在IT行业中,自定义半透明遮罩层是一个常见的前端开发任务,它主要用于创建一个覆盖在网页元素上方的半透明黑屏或灰屏效果,通常用于弹窗、加载提示或者阻止用户与页面其他部分的交互。这个"自定义半透明遮罩层-源码...

    如何阻止小程序遮罩层下方图层滚动

    总结来说,通过以上知识点,我们可以了解到,在小程序开发中要阻止遮罩层下方图层滚动,需要合理运用事件冒泡机制和事件处理属性来控制事件的传递和默认行为。同时,要关注小程序不同版本的特性差异,以确保代码的...

    弹出遮罩层后禁止滚动效果【实现代码】

    综上所述,通过监听`touchmove`事件或修改CSS样式,我们可以实现弹出遮罩层后禁止页面滚动的效果。这两种方法各有优缺点,选择哪种取决于具体应用场景和目标用户群。在实际开发中,应结合项目需求灵活运用,并注意...

    老生常谈遮罩层 滚动条的问题

    解决方案的关键在于`resetBg`函数,它在窗口滚动事件触发时运行,动态调整遮罩层的尺寸,确保无论页面滚动到何处,遮罩层都能完全覆盖整个视口,包括滚动条下方的区域。这解决了原始问题,使得遮罩层能够始终跟随...

    基于jquery的BlockUI做的遮罩层

    在网页开发中,有时我们需要创建一个遮罩层或者弹出框来提示用户或者阻止用户与页面其他部分的交互,这就是“基于jQuery的BlockUI”插件所做的事情。BlockUI是一款非常实用的jQuery插件,它能够方便地实现页面区域的...

    页面遮罩层,并且阻止页面body滚动。bootstrap模态框原理

    6. 为了确保用户体验,需要在遮罩层消失时恢复页面滚动的默认行为。 通过以上技术细节的介绍,我们可以得知,实现页面遮罩层和禁止滚动并不是一个特别复杂的操作,但是它对于提升用户体验是非常有效的。特别是在...

    几个实用的jQuery弹出遮罩层例子

    4. **增强用户体验**:为了提供更好的用户体验,我们还可以添加一些额外的功能,如阻止页面滚动,当遮罩层打开时,或者在弹出内容上设置焦点,确保键盘导航的可用性。 5. **响应式设计**:随着移动设备的普及,响应...

    显示遮罩层的插件:blockUI

    BlockUI 是一个非常实用的JavaScript插件,它主要用于在网页上快速创建遮罩层效果,以便在页面加载、异步操作或任何需要阻止用户交互的情况下提供视觉反馈。这个插件的目的是提供一种简单的方式来“锁定”用户的界面...

    vue 弹出遮罩层样式实例

    为了解决这个问题,我们可以阻止遮罩层内的触摸滚动事件。在Vue中,我们可以通过监听`@touchmove`事件并阻止其默认行为来实现这一点: ```html <div class="popContainer" v-show="isVisible" @touchmove.prevent>...

Global site tag (gtag.js) - Google Analytics