我正在创建这个网站,当您单击标题第二行最右侧的链接时,将弹出嵌入了YouTube视频的模态窗口。
当我滚动模态窗口时,BODY也会滚动,我想停止这种情况。我该如何做?
非常感谢您的帮助!谢谢您的时间。
当我滚动模态窗口时,BODY也会滚动,我想停止这种情况。我该如何做?
非常感谢您的帮助!谢谢您的时间。
body.modal-open {
overflow: hidden;
}
此外,使用一些 jQuery 代码,当模态框打开时,将 .modal-open
类添加到 <body>
标签中,当它关闭时,将其移除。$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
</body>
标签上方添加 <script>
标签,并在其中编写 JavaScript 代码。 - IvanJfunction openModal(){
$("html").css({"overflow-y":"hidden"})
// open your modal box function in this area...
}
这就是修复方法。您可以创建一个CSS类,并在打开或关闭模态框时切换HTML上的类。但对我来说,这肯定解决了问题。
.disable-scroll {
/* disable scrollbar on both x and y axis */
overflow: hidden;
/* disable scrollbar on x-axis only */
overflow-x: hidden;
/* disable scrollbar on y-axis only */
overflow-y: hidden;
/* disable scroll */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
/* OPTIONAL: none of dom element will be click-able */
pointer-events: none;
}
overflow:hidden;
,这样用户就不能滚动屏幕。在Chrome和Firefox浏览器中,简单地使用overflow: hidden;
来隐藏滚动条是不行的。使用position: fixed;
可以解决问题,但是这样做的副作用是在关闭模态框时可能会导致屏幕跳动。
以下方法可以在Chrome和Firefox下都隐藏滚动条:
.modal-open {
-moz-appearance: menuimage;
}
.modal-open::-webkit-scrollbar {
width: 0 !important;
}
.modal-open div {
height: 0px;
}
$("body").css("overflow-y", "hidden")
。 - Mahedi Sabuj$("#yourElemrntIdName").click(function(){$("body").css("overflow-y", "hidden");});
。 - Mahedi Sabuj