如何禁用導航疊加中的正文滾動並在正文中啟用它？

Question

大家好，我正在尋找一個答案來禁用導航重疊中的正文內容滾動，但是當我關閉導航重疊時，正文滾動應該開始工作，但是我無法做到這一點。

我在Stackoverflow上找不到任何正確答案。 任何幫助，將不勝感激。

Answer 1

您可以使用JavaScript設置打開疊加層時將主體溢出 （或其他任何元素）設置為隱藏 ，並在單擊關閉按鈕時將其設置回自動 。

$('.open-overlay').click(function() {
    $('body').css('overflow', 'hidden');
});
$('.close-overlay').click(function() {
    $('body').css('overflow', 'auto');
});

這是一個有效的小提琴： https : //jsfiddle.net/44gk77d3/1

編輯：我已經添加了通過單擊同一按鈕來啟用/禁用溢出的選項。

https://jsfiddle.net/44gk77d3/2/

Answer 2

看到您的要求，我已經根據您的條件創建了一個代碼。 我創建了具有可滾動內容的主體內容以及具有可滾動內容的覆蓋菜單。

在下面提到的代碼中，您可以檢查在重疊菜單可見時如何禁用正文滾動，以及在重疊菜單隱藏時再次出現正文滾動。

 function openNav() { document.getElementById("myNav").style.width = "100%"; document.querySelector("body").style.overflow = "hidden"; } function closeNav() { document.getElementById("myNav").style.width = "0%"; document.querySelector("body").style.overflow = "auto"; } 

 body { font-family: 'Lato', sans-serif; } .overlay { height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgb(0, 0, 0); background-color: rgba(0, 0, 0, 0.9); overflow-x: hidden; transition: 0.5s; } .overlay-content { position: relative; top: 25%; width: 100%; text-align: center; margin-top: 30px; } .overlay a { padding: 8px; text-decoration: none; font-size: 36px; color: #818181; display: block; transition: 0.3s; } .overlay a:hover, .overlay a:focus { color: #f1f1f1; } .overlay .closebtn { position: absolute; top: 20px; right: 45px; font-size: 60px; } @media screen and (max-height: 450px) { .overlay a { font-size: 20px } .overlay .closebtn { font-size: 40px; top: 15px; right: 35px; } } 

 <div id="myNav" class="overlay"> <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> <div class="overlay-content"> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> <a href="#">About</a> <a href="#">Services</a> <a href="#">Clients</a> <a href="#">Contact</a> </div> </div> <h2>Fullscreen Overlay Nav Example</h2> <p>Click on the element below to open the fullscreen overlay navigation menu.</p> <p>In this example, the navigation menu will slide in, from left to right:</p> <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; open</span> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat est eget consequat varius. Vestibulum non sapien ligula. Ut in nunc vel tortor finibus euismod vitae at ex. Cras ac purus iaculis, dapibus mi quis, volutpat lorem. Nunc rutrum tellus massa, vitae molestie enim fermentum eu. Fusce id ex eu mi luctus rhoncus ut eget nulla. Cras a vehicula arcu, id pharetra mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean malesuada dui ac iaculis vehicula. Etiam venenatis, est a tincidunt commodo, ex sapien cursus diam, non dictum purus lorem eu tellus. Ut ornare enim orci, ut vulputate odio feugiat at. Nullam laoreet sed ex non ultricies. Maecenas suscipit tincidunt elit, non pellentesque enim ornare et. Phasellus eu gravida libero, vel tincidunt orci. Nulla facilisi. In congue, sapien tincidunt eleifend ornare, ex lectus finibus felis, aliquet pretium dui justo sed sapien. Nulla elementum arcu non leo lobortis, in ullamcorper eros convallis. Nullam luctus tincidunt semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac risus sagittis, venenatis dolor eget, tempus nunc. Proin et nisl ac metus blandit interdum convallis ac quam. Proin porttitor nulla vel egestas euismod. Suspendisse malesuada tellus quis purus consectetur molestie. Cras interdum varius interdum. Vestibulum condimentum nisi turpis, ut sodales arcu fringilla ut. Quisque ultricies sollicitudin lacus, sit amet euismod sem sagittis ac. Praesent consectetur libero ut nunc suscipit vulputate. Duis commodo neque vel convallis euismod. Suspendisse potenti. Sed viverra eu enim a rhoncus. Proin sodales commodo odio non blandit. Phasellus rhoncus tellus at velit maximus tincidunt. Nullam lacus lectus, mattis vel justo vitae, lacinia tempus elit. Sed dignissim posuere accumsan. In malesuada luctus tristique. Ut fringilla aliquet sapien in aliquet. Proin ac ultrices lectus. Mauris sed libero rutrum, tincidunt urna et, dignissim massa. Cras iaculis sed tortor id maximus. Aliquam in sem id mi tristique pellentesque vitae efficitur leo. Proin non dolor ac libero fringilla tempor sed a arcu. Aenean rutrum tellus sapien, in volutpat lectus cursus et. Sed vel bibendum nulla. Proin nunc quam, dictum eget congue maximus, vestibulum eu mauris. Aliquam erat volutpat. Morbi quis magna et est tempor condimentum in eu purus. Sed dignissim nulla sed diam scelerisque, non malesuada purus sodales. Praesent in nunc condimentum, tempor dolor vitae, accumsan enim. Sed nec elit in ex porttitor rutrum. Maecenas ultricies augue eu ex porta, finibus efficitur ex eleifend. Proin volutpat diam a diam ultrices euismod. Sed bibendum semper lorem sodales auctor. Sed turpis dolor, pellentesque nec dui quis, tincidunt commodo urna. Fusce sit amet elementum enim. Curabitur vel sodales mi, sed laoreet leo. Fusce ut ultricies justo. Etiam nec massa tortor. Mauris interdum commodo erat, in pulvinar urna vestibulum in. In posuere dictum nisl, non bibendum velit mattis vulputate. Vivamus elementum magna et egestas bibendum. Nulla efficitur urna pellentesque, feugiat augue fringilla, pulvinar felis. In at sollicitudin metus. Aliquam vehicula aliquet dolor vel bibendum. Donec euismod enim metus, et gravida sem tempus et. Donec ipsum quam, fermentum vel finibus quis, tempor vitae sem. Suspendisse tincidunt nulla ut eros congue cursus. Praesent ante ligula, congue in laoreet sed, pellentesque vel sapien. Nam pulvinar dolor at odio dignissim, vestibulum finibus justo aliquet. Duis lobortis, metus a vehicula interdum, quam metus convallis orci, et rutrum nibh purus at massa. Aenean rutrum mi enim, accumsan efficitur lorem accumsan quis. In laoreet id arcu non accumsan. Donec quis urna et risus auctor feugiat eget quis nisl. Aliquam vulputate libero a lacus luctus dignissim. Duis accumsan a tellus sed ultrices. Etiam ornare purus id iaculis volutpat. Pellentesque euismod mi orci, malesuada hendrerit ligula varius sollicitudin. Integer tortor justo, rhoncus a lobortis vel, pharetra eu ipsum. Aliquam et lectus turpis. Aenean sagittis sapien ut mattis efficitur. Ut ut ullamcorper nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque tempus leo metus. Donec tempus dictum mauris. Praesent finibus dolor vel faucibus finibus. Vestibulum tincidunt euismod dui in pretium. Donec quis facilisis augue. Praesent at lacus vestibulum, finibus leo a, lacinia est. Praesent vehicula sem turpis, non maximus elit placerat quis. Sed quis mi eu nunc feugiat fermentum ut in mauris. Fusce turpis augue, mollis eu risus a, tincidunt pretium felis. Aliquam sapien velit, bibendum in bibendum at, porta et purus. Nam feugiat lectus vitae ex blandit vestibulum. Curabitur et vestibulum quam, quis ornare odio. Pellentesque cursus, felis sit amet convallis rutrum, eros dolor finibus justo, sed finibus metus augue quis tellus. Morbi rutrum, mi ut pretium egestas, nisi risus luctus tellus, at pulvinar magna orci ut nunc. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas nec eros malesuada, ornare arcu vitae, dictum massa. Suspendisse suscipit, ante vitae elementum scelerisque, orci neque mattis massa, vel luctus ante orci ac urna. Vestibulum sagittis, urna eget pellentesque convallis, massa lorem tincidunt purus, eget tincidunt enim libero at lacus. Maecenas dignissim quam ut leo consectetur facilisis. Phasellus tincidunt viverra malesuada. Phasellus nec quam maximus, egestas ante ut, facilisis erat. Phasellus porta magna enim, nec semper dolor facilisis sit amet. Proin dapibus dui sit amet urna convallis, et bibendum nunc aliquet. Suspendisse ac ex eu dui mollis molestie. Sed dignissim, sem in pretium ultrices, enim elit pellentesque odio, quis elementum nunc magna vitae nibh. Nulla venenatis quis risus vitae rhoncus. Vivamus varius tempus justo vitae volutpat. Suspendisse vitae venenatis erat. In et ultrices nunc. Curabitur ac suscipit orci. Proin porta nibh ac urna viverra, a porttitor risus porttitor. Aliquam bibendum convallis enim, eget porttitor dui dignissim vitae. Duis aliquet congue enim sit amet pretium. Ut sed imperdiet diam. Nam ut est mauris. Vestibulum ut lorem tristique, accumsan neque et, egestas diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed justo leo, accumsan suscipit purus nec, auctor faucibus leo. Donec at tincidunt purus, sit amet vulputate risus. Duis sed sodales neque. Donec nec risus id metus venenatis aliquam. Sed maximus tortor et ligula commodo finibus. Nullam in leo at urna aliquam pellentesque. Donec egestas ex sapien, vitae commodo magna accumsan vitae. Sed tincidunt sit amet lacus accumsan rhoncus. Mauris feugiat magna vel nisl tincidunt, nec auctor neque pulvinar. Cras sit amet pellentesque justo, sit amet elementum sapien. Suspendisse imperdiet feugiat massa, eu vulputate neque commodo quis. Morbi venenatis est ut massa sollicitudin consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin porttitor diam sed convallis faucibus. Fusce pretium eget mi id consequat. Proin non sem euismod, porttitor elit sed, porttitor eros. Nam elementum, turpis quis convallis lacinia, libero nisi consectetur lectus, in luctus neque enim in leo. Quisque congue elementum interdum. Quisque commodo urna ipsum, in ullamcorper sapien elementum vitae. Vivamus mollis magna orci, id volutpat felis sodales vitae. Quisque sagittis, ante a luctus dignissim, nisi elit mattis sapien, et sodales neque risus ut lacus. Duis viverra justo augue, vel ornare erat laoreet ac. Aenean imperdiet leo non tristique dapibus. Morbi in tempus metus. Sed eu scelerisque dolor, ac vehicula tellus. Vivamus a quam a nisi dignissim posuere. Nulla facilisi. Praesent tristique dui nec neque aliquam blandit. Nam non tincidunt ipsum. Morbi cursus sed nulla quis porta. Ut urna libero, iaculis ut velit sed, sagittis consectetur nisi. Aliquam pretium, est ac auctor pellentesque, nulla odio ornare dolor, sed vulputate purus neque ut ligula. Cras diam felis, tempor quis placerat a, suscipit non odio. Nam enim erat, tempor nec euismod at, venenatis ut mi. Sed lacus sem, semper vel blandit id, rutrum et augue. Nulla varius mattis felis. Vestibulum ac eros sollicitudin, vehicula massa non, suscipit dolor. Phasellus posuere ultricies nunc, lacinia viverra augue tempus eget. Quisque id lacinia nisi, sit amet tempor augue. Integer massa velit, aliquam vitae ex et, placerat euismod augue. Nullam faucibus, lorem eget sodales hendrerit, nulla enim molestie risus, sed laoreet velit erat nec elit. Pellentesque nec condimentum felis. Quisque at nisi nec purus blandit hendrerit in et risus. Nam mattis enim tortor, eu porttitor purus blandit sed. Aenean scelerisque sodales consectetur. Sed euismod ullamcorper mauris at aliquet. Praesent varius quam vulputate gravida tincidunt. Cras vitae nisl bibendum, dictum lectus sed, semper enim. Donec id felis ex. Proin sit amet eros nec metus eleifend dapibus at a nibh. Suspendisse est nibh, bibendum quis tincidunt non, lobortis eget lorem. Aenean cursus pharetra porta. In congue, erat sit amet tempus molestie, arcu nisl finibus risus, eu tempus augue purus et ex. Vivamus maximus nisl ut facilisis suscipit. Vivamus nec ullamcorper arcu. Etiam eu dolor vel orci consequat imperdiet nec eget nulla. Praesent volutpat maximus dolor, ut ornare odio aliquet interdum. Duis at felis velit. In non facilisis leo. Nulla a convallis nulla. Donec nulla odio, vestibulum eget pulvinar in, congue et lorem. Mauris mollis cursus erat, in dignissim tortor viverra non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel nisi fringilla, molestie mi id, placerat lorem. Nullam elementum diam mauris, vel hendrerit lacus faucibus ac. Donec justo orci, pretium at mollis et, rhoncus sed est. In tincidunt pellentesque nisl eu malesuada. Donec sagittis eros sit amet aliquam fringilla. Duis ullamcorper, ipsum vitae dignissim elementum, est odio accumsan orci, non pharetra ipsum dolor sit amet nisi. In vulputate scelerisque arcu, sed laoreet nunc laoreet gravida. Fusce arcu sapien, dapibus nec dui vel, imperdiet luctus elit. Nullam ultrices velit a ex euismod, id fermentum risus mollis. Curabitur sem magna, posuere a nisl non, fringilla pellentesque quam. Suspendisse ornare aliquet sem, ut luctus diam vulputate id. Nunc ac rhoncus erat. Nullam sed tortor mi. Etiam sed lorem ligula. Pellentesque efficitur fermentum lacinia. Aliquam erat volutpat. In fringilla elit ornare lacus euismod, vel facilisis lorem tempus. Nulla et arcu vitae eros lacinia laoreet. Etiam convallis hendrerit libero, et tempus erat placerat ac. Nulla vitae tellus vitae risus euismod bibendum quis vel magna. Donec pellentesque mollis risus. Proin eleifend ipsum mi, id malesuada lacus tincidunt sed. Maecenas aliquam facilisis urna, eget fringilla dui vulputate ac. Nam et lectus magna. Nulla sed mauris ut velit tempus sollicitudin eget id lacus. Vivamus venenatis massa orci, ut dapibus quam porttitor et. Maecenas neque mi, commodo quis diam et, pellentesque porttitor nisl. Fusce dictum lectus mauris, a iaculis turpis tincidunt eu. Sed vestibulum quis ex dignissim ullamcorper. Integer tempus elit et dolor semper, eget interdum magna fermentum. Ut pulvinar venenatis ultricies. Donec rutrum turpis at ipsum congue bibendum. Nam porttitor id dolor in pharetra. Ut lectus mi, suscipit ut odio et, condimentum luctus sapien. Vivamus est enim, volutpat at viverra ut, sollicitudin at ex. Nulla imperdiet porta sem. Nulla facilisi. Maecenas et risus sit amet magna fringilla placerat. Nulla elementum nunc vitae dictum varius. Ut eu felis risus. Aliquam viverra vestibulum velit, ut cursus nisl cursus in. Sed molestie massa at nisi ornare sodales. </p> 

如果您仍然有任何疑問，請隨時發表評論。