我有这个 HTML 代码:
<div class="parentDisable"></div>
<div id="popup">
<div class="karmalayer">
<img src="<?php echo(IMG) ?>alpha-shadow.png">
Thank you for visiting
</div>
</div>
具有以下属性:
.karmawrapper {
position: absolute;
z-index: 10001;
width: 100%;
}
.karmalayer {
margin: 0 auto;
display: block;
background-color: #000;
width: 500px;
height: 300px;
border: 2px solid #337ab7;
color: #fff;
padding: 20px;
font-size: 18px;
}
.hlcolor {
color: #337ab7;
}
.karmalayer img {
margin: 0 auto;
display: block;
}
.parentDisable{
position:fixed;
top:0;
left:0;
background:#000;
opacity:0.8;
z-index:10000;
height:100%;
width:100%;
}
#popup{
position: absolute;
z-index:10001;
width: 100%;
display: none;
text-align: center;
}
这是为了在打开页面和显示弹出窗口时“禁用”我的背景。由于我的网站已经在后台加载(而且网站很长),我想禁用滚动功能。基本上,只要用户在 div popup
中,就不应允许滚动。
我尝试用 jQuery 解决它,但没有成功:
$(document).bind('mousewheel', function (event) {
event.preventDefault();
var delta = event.originalEvent.wheelDelta || -event.originalEvent.detail;
init_scroll(event, delta);
});
有什么想法吗?
最佳答案
对于不可滚动的内容,将其包裹在容器中并将其溢出设置为隐藏。容器需要一个固定的高度,因此将位置设置为绝对位置并将高度/宽度设置为 100% 应该会像您通常期望的页面内容那样填充屏幕。这将防止出现滚动条并防止默认的滚轮 Action 。在显示内容之前检查页面何时加载。
此外,如果您的页面内容如此之多,也许将其分成多个页面就足够了?或者,仅当用户滚动到内容时才通过 ajax 加载内容。
关于jquery - CSS/jQuery 防止在某些 Div 上滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32129367/