防止单击和关闭覆盖菜单时主体滚动 css
Prevent body scroll on click and close of overlay menu css
目前我有一个通过点击启动的覆盖 CSS 菜单。但是它后面的页面仍然可以滚动。我确信这是一个简单的修复,但我是 css/js 的新手,任何帮助都会很棒!
目前我有一个 js 切换功能,当点击 .icon(汉堡包图标)时,.mobilenav(覆盖菜单)会在页面上淡出。
启用此切换功能后,我可以添加什么样的功能来防止正文滚动?
有什么我可以轻松添加到下面这个功能的吗?
$(document).ready(function () {
$(".icon, .link").click(function () {
$(".mobilenav").fadeToggle(700);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
我猜你正在寻找这样的东西:
document.body.style.overflow="hidden"
为了能够再次滚动,请使用
document.body.style.overflow="scroll"
示例:
document.body.onclick=function(){
this.style.overflow="hidden"
}
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
此外,当您使用 jQuery 时,类似这样的方法也可以:
$('body').css('overflow', 'hidden'); // disables scrolling
$('body').css('overflow', 'scroll'); // enables scrolling
$(document).ready(function () {
$(".icon, .link").click(function (event) {
event.preventDefault();
$('body').toggleClass('overflow');
$(".mobilenav").fadeToggle(700);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
Add the below piece of code into css file
.overflow
{
overflow:hidden;
}
目前我有一个通过点击启动的覆盖 CSS 菜单。但是它后面的页面仍然可以滚动。我确信这是一个简单的修复,但我是 css/js 的新手,任何帮助都会很棒!
目前我有一个 js 切换功能,当点击 .icon(汉堡包图标)时,.mobilenav(覆盖菜单)会在页面上淡出。
启用此切换功能后,我可以添加什么样的功能来防止正文滚动?
有什么我可以轻松添加到下面这个功能的吗?
$(document).ready(function () {
$(".icon, .link").click(function () {
$(".mobilenav").fadeToggle(700);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
我猜你正在寻找这样的东西:
document.body.style.overflow="hidden"
为了能够再次滚动,请使用
document.body.style.overflow="scroll"
示例:
document.body.onclick=function(){
this.style.overflow="hidden"
}
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
Click anywhere to disable scrolling<hr>
此外,当您使用 jQuery 时,类似这样的方法也可以:
$('body').css('overflow', 'hidden'); // disables scrolling
$('body').css('overflow', 'scroll'); // enables scrolling
$(document).ready(function () {
$(".icon, .link").click(function (event) {
event.preventDefault();
$('body').toggleClass('overflow');
$(".mobilenav").fadeToggle(700);
$(".top-menu").toggleClass("top-animate");
$(".mid-menu").toggleClass("mid-animate");
$(".bottom-menu").toggleClass("bottom-animate");
});
});
Add the below piece of code into css file
.overflow
{
overflow:hidden;
}