已解決430363個問題，去搜搜看，總會有你想問的

全屏菜單打開時如何禁用正文滾動

首頁猿問全屏菜單打開時如何禁用正文滾動

全屏菜單打開時如何禁用正文滾動

JavaScript

森欄 2022-10-21 14:17:30

誰能告訴我打開全屏菜單時如何禁用滾動？下面的代碼是我目前擁有的。我需要在菜單打開時禁用桌面和移動設備上的滾動，因為此時您可以在打開菜單時滾動，并且在您關閉菜單時會在不知不覺中最終出現在頁面的不同部分。<div class="navigation-container"><input type="checkbox" id="main-navigation-toggle" class="btn btn--close" title="Toggle main navigation" /><label for="main-navigation-toggle"> <span></span></label><nav id="main-navigation" class="nav-main"> <ul class="menu"> <li class="menu__item"> <a class="menu__link" href="#0">Home</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">About</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Projects</a> </li> <li class="menu__item"> <a class="menu__link" href="#0">Contact</a> </li> </ul></nav></div>

查看完整描述

2 回答

MYYA

TA貢獻1868條經驗獲得超4個贊

我相信您想在切換菜單按鈕時啟用和禁用頁面滾動。您可以通過使用 jQuery 來實現：

$('input[id="main-navigation-toggle"]').on('change',function(e) {

if ($(this).prop('checked')) {

$('body').css('overflow', 'hidden');

} else {

$('body').css('overflow', 'auto');

};

});

此代碼將檢查您提供的復選框輸入id = main-navigation-toggle是否被選中，如果選中，則overflowbody 元素的 CSS 屬性將設置為hidden，如果未選中，則該overflow屬性將設置為auto，這意味著滾動菜單關閉時再次啟用。

反對回復 2022-10-21

森林海

TA貢獻2011條經驗獲得超2個贊

用這個屬性修改這個類

[id="main-navigation-toggle"] ~ label {

cursor: pointer;

position: absolute;

right: 2rem;

top: 0rem;

z-index: 100;

}

正確的值已更改，我嘗試了這個，或者如果你想禁用滾動

body{

overflow: hidden;

}

反對回復 2022-10-21

2 回答
0 關注
157 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

全屏菜單打開時如何禁用正文滾動

全屏菜單打開時如何禁用正文滾動

2 回答

添加回答