使用 jQuery 而不是 CSS 防止页面在按钮点击时滚动
Prevent page scrolling on button click with jQuery not CSS
我试图通过单击汉堡包图标打开菜单时阻止页面滚动。我不想使用 css,因为当我创建 class "body.noScroll,html.noScroll{overflow: hidden}" 时,它会删除滚动条并导致页面逐渐变宽,导致菜单动画跳动并且看起来像垃圾。所以 CSS 是不行的。我搜索了这个网站并阅读了多种尝试方法。主要是这个页面Just disable scroll not hide it?
1. 我的第一次尝试:
function lockScroll(e) {
e.preventDefault();
}
$('.menuBtn').click(function(){
if( $('.menu').hasClass('open') ){
$('body').unbind('mousewheel touchmove', lockScroll);
$('.menu').removeClass('open');
}
else{
$('body').bind('mousewheel touchmove', lockScroll);
$('.menu').addClass('open');
}
});
但这给了我一个 jquery 错误:
[干预] 由于目标被视为被动,无法阻止被动事件侦听器中的默认设置
2. 我的第二次尝试似乎效果最好,但仍有一些问题:
CSS
body.noScroll{
position: fixed;
overflow-y: scroll;
}
jQuery
$('.menuBtn').click(function(){
if( $('.menu').hasClass('open') ){
$('body').css('top', - ($(window).scrollTop()) + 'px').removeClass('noScroll');
$('.menu').removeClass('open');
}
else{
$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});
这将在菜单打开时阻止滚动,但一旦您关闭菜单,滚动将重新启用,但它会跳回页面顶部。
我已经尝试了第三次尝试,但它与第二次尝试的效果相同(跳回页面顶部)。这是一个 fiddle 我尝试过的三个尝试 - Fiddle
非常感谢对此的任何帮助。
您可以使用一个变量来记住 window 的滚动条的当前位置,当菜单被赋予 .open
的 class 并且一旦 class被删除将当前滚动位置设置回交互之前的位置。
参见下面的示例:
let currentPos;
$('.menuBtn').click(function() {
if ($('.menu').hasClass('open')) {
$('body').css('top', -($(window).scrollTop()) + 'px').removeClass('noScroll');
$('.menu').removeClass('open');
// set the scroll back to where it should be
$(window).scrollTop(currentPos);
} else {
// remember where the scroll was
currentPos = $(window).scrollTop();
$('body').css('top', -($(window).scrollTop()) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color: white;
margin: 0;
font-size: 13px;
}
body.noScroll {
position: fixed;
overflow-y: scroll;
/* width: 100%; */
}
.menuBtn {
border: 2px solid #FFF;
font-style: italic;
padding: 5px 10px;
display: inline-block;
position: fixed;
background-color: #20262E;
top: 20px;
left: 20px;
z-index: 999999;
cursor: pointer;
}
.menu {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(22, 26, 31, 0.9);
z-index: 999998;
top: -100%;
left: 0;
transition: top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu.open {
top: 0;
transition: top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu .menuTxt {
width: 100%;
height: 100vh;
position: relative;
}
.menu .menuTxt ul.menuTxtWrap {
position: absolute;
top: 50%;
left: 50%;
z-index: 999999;
margin: 0;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 0;
}
.menu .menuTxt ul.menuTxtWrap li {
list-style: none;
padding: 10px 0;
}
.info {
padding-top: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuBtn">Menu</div>
<div class="menu">
<div class="menuTxt">
<ul class="menuTxtWrap">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div class="info">
<h1>Top Of Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore iusto voluptatibus doloribus repudiandae aut laudantium voluptates perspiciatis velit! Repudiandae natus, obcaecati harum deserunt, omnis porro reprehenderit laborum esse impedit similique
ullam perspiciatis nihil incidunt saepe facilis aperiam dolore soluta voluptatibus quisquam praesentium libero sint. Minus quae alias deleniti nobis ratione rem saepe, cupiditate fugiat!</p>
<p>Quae, totam laudantium culpa, accusamus fugiat minima reiciendis excepturi, iusto autem aliquam rerum quo nulla repellendus obcaecati aspernatur. Neque iure velit, expedita eius error nisi dignissimos veritatis vel quis unde reprehenderit, perferendis
dolorum magni libero molestiae laborum minima architecto consequatur animi, tempore amet. Quaerat vel deserunt a fugit veritatis nostrum tenetur laudantium voluptatibus laborum inventore!</p>
<p>Dolorem tenetur voluptates non necessitatibus nulla accusamus provident illum laboriosam blanditiis recusandae exercitationem fugiat illo magni, dolorum, reprehenderit! Iure commodi, recusandae vel! Assumenda ut sapiente, quo, libero est non mollitia?
Iusto sit temporibus dignissimos consequatur tenetur quos nihil facere, culpa amet mollitia at ducimus placeat, quasi harum natus blanditiis sunt! Distinctio aperiam praesentium dolore, inventore!</p>
<p>Fugit atque odit, saepe incidunt modi magnam illo laboriosam debitis, ab similique tenetur earum placeat deleniti et ullam neque voluptatibus quam nihil, doloremque dignissimos pariatur! Cum velit, saepe, soluta libero temporibus odio. Exercitationem
voluptates accusantium deleniti perferendis neque eius architecto modi est cupiditate explicabo eaque perspiciatis suscipit dolorum corporis, ex incidunt temporibus. Ut, blanditiis magni?</p>
<p>Fugiat veritatis, impedit, alias iusto nam animi? Beatae delectus nulla iure reiciendis eius provident consequatur illo eum accusantium est quaerat praesentium ipsum culpa et distinctio consectetur omnis, odit dolor, consequuntur qui, veniam voluptate
amet. Obcaecati explicabo cupiditate, laborum nulla suscipit rem cum fuga iure blanditiis illum, pariatur nostrum fugiat voluptates earum animi ea minima adipisci!</p>
<p>Ea eius aliquam aut unde reprehenderit iusto explicabo error quae nesciunt quaerat, non, id quasi voluptatum excepturi assumenda natus minima incidunt, laboriosam! Provident odit dolor, ab quasi eligendi repudiandae quam porro unde voluptate dolore
aut fugit, reiciendis sapiente! Officiis dolorum delectus asperiores natus aliquam adipisci, soluta maiores, sint, optio mollitia voluptas voluptatum quod impedit doloribus.</p>
<p>Nulla numquam placeat dignissimos ab repellendus adipisci, dolorem tenetur optio, tempora dolores eius ad, dolore porro accusantium saepe eveniet perferendis. Ipsam, vitae cum, ullam asperiores eum, incidunt dolorum porro tenetur error officiis, ipsa
qui iure illum. Quas similique autem, numquam aliquam sequi pariatur quis consequatur, delectus ad assumenda aut ipsa inventore impedit maiores deserunt sapiente!</p>
<p>Repellat architecto ducimus maxime consectetur nobis, sint, et minima dolorem optio reiciendis nulla! Nihil quidem repellendus saepe laboriosam necessitatibus, odit, cupiditate impedit nobis, fugit quod, voluptatum neque. Id sapiente temporibus quasi.
Excepturi necessitatibus, minima in sint, cumque veritatis temporibus voluptatibus. Adipisci architecto quas voluptates, ut dolor. Amet, laudantium beatae quasi. Minus culpa eligendi, officia libero!</p>
<p>Doloremque, necessitatibus. Debitis, nisi, ratione molestiae ut odit voluptatum deleniti optio quo quis! Rerum aliquam quis aliquid ducimus ratione voluptate facilis numquam fugit mollitia, consectetur illo culpa. Distinctio atque incidunt, facere facilis
ipsa porro aliquam nam sit earum expedita, dolore ea corporis suscipit veritatis neque at aspernatur rerum dolores minus quibusdam fugiat odio magnam quasi.</p>
<p>Ipsum consequuntur asperiores, sequi voluptas doloremque cum. Vitae ullam illum nihil excepturi possimus consequuntur veniam, harum quam expedita facere consectetur dignissimos voluptas tenetur ipsa in illo mollitia fugit eos sint enim ea ab? Quam error
animi nihil incidunt debitis dolorum dicta placeat porro, nulla officiis blanditiis odio harum aliquam eveniet mollitia, facilis enim repellendus ea!</p>
<p>Corporis dolores a voluptatibus. Quos obcaecati voluptates et delectus beatae, ipsa dolores consectetur rem aspernatur perspiciatis dignissimos nisi deserunt sequi, neque, repudiandae unde commodi voluptatum dolorum alias suscipit tempore sed accusamus
repellat est. Architecto maiores voluptates deleniti incidunt fugiat. Dolorem, vel? Repudiandae corporis iste blanditiis, voluptates officia excepturi harum assumenda adipisci maiores quisquam, non eligendi.</p>
<p>Eaque laborum obcaecati voluptas voluptatum mollitia dolor optio aspernatur nostrum culpa officia. Quidem fuga nam totam quam ut molestiae perspiciatis doloribus aut, ea neque at voluptate officiis mollitia, ex temporibus corporis accusantium excepturi
dolorem enim reprehenderit modi doloremque maxime, repellendus nobis! Reprehenderit sequi adipisci amet harum ad enim quas, mollitia alias! Voluptatem aliquam ipsa minima.</p>
<p>Officia maiores cum ipsum blanditiis consequuntur. Alias iure, sunt magnam enim omnis suscipit quibusdam odio, quam earum veniam aliquam voluptatem sit totam iste, deleniti temporibus corrupti accusantium reprehenderit explicabo reiciendis provident
quod doloribus! Soluta totam, molestiae aliquid voluptas, vero facere dolores illum accusantium deleniti quam repellat nam blanditiis ratione quasi, consequuntur qui cupiditate. Tempora, consectetur.</p>
<p>Voluptatem modi dolor, facilis numquam eligendi pariatur delectus tempore porro perferendis sint, cum accusantium nam eos voluptatum, debitis minima. Tempore blanditiis veniam odio magnam quisquam, et, distinctio assumenda sit consequatur reprehenderit
quos cumque vel! Nobis, possimus, rem! Hic soluta, rem facilis, non, tempore suscipit optio voluptates dicta est nesciunt facere exercitationem necessitatibus. Omnis, veniam, doloribus.</p>
<p>Quaerat laboriosam at sint quod. Quae unde rem magnam sint vero sit, fuga eum, aperiam temporibus odio officia quis autem deserunt quod. Quam distinctio laborum ducimus dignissimos rem eaque eum doloribus aspernatur corporis, harum officia magnam iure
repellendus inventore dolor voluptatem quaerat sint laboriosam vel tempora enim quibusdam accusantium. Laborum eveniet molestias minus, numquam voluptas?</p>
<p>Fugiat dolore aliquam impedit dicta temporibus sapiente quod! Optio atque magnam ab omnis dolores cum enim reiciendis. Itaque explicabo repellendus rem esse ad soluta quia mollitia vel porro quam iusto blanditiis harum aliquam, iure sequi tempora. Sunt
omnis quidem aliquam earum esse veniam accusantium hic recusandae amet error ab explicabo, ducimus quam placeat ullam. Hic.</p>
<p>Perferendis necessitatibus voluptatum facere eveniet laudantium quisquam accusamus natus porro? Magnam iusto voluptate, repellendus sapiente explicabo nostrum dolore libero asperiores debitis. Itaque molestias, repudiandae dicta, debitis consequuntur
non magni doloribus illo distinctio autem unde. Voluptates explicabo deserunt suscipit nisi quo veniam, maxime, dolore soluta, cum animi delectus. Laborum saepe ea, voluptates minima, obcaecati soluta quidem!</p>
<p>Perferendis, doloribus eaque deleniti inventore quisquam praesentium. Unde quia repudiandae reprehenderit eos alias. Numquam aut iste quos molestias quaerat fuga corporis sit ipsum deserunt aliquam velit cupiditate aperiam explicabo, reiciendis necessitatibus
reprehenderit excepturi nemo temporibus, laudantium tempore voluptatum amet dolores illum soluta? Eius nobis alias ut commodi optio error vel mollitia ea ullam, minima aliquid?</p>
<p>Eos amet tempora natus. Labore beatae temporibus nisi adipisci veritatis doloribus quod. Sit a nisi doloremque consequatur saepe, aliquid corporis, quo iusto dolores id expedita! Quos debitis, voluptates eligendi mollitia veniam similique, ab pariatur
deserunt optio voluptate expedita commodi dolores! Voluptate nostrum, illum totam culpa aut officiis molestias magnam ullam cum earum? Cupiditate, iusto, ducimus.</p>
<p>Dolorem veniam incidunt fuga quaerat corrupti cumque est ab, vel consequuntur similique suscipit maiores excepturi aut harum, placeat, dolor. Impedit beatae necessitatibus facere cum eum, voluptate sint vero quod porro hic ratione assumenda, libero
quasi repellendus eius quae possimus, quos itaque iure. Placeat odio eveniet debitis temporibus, nam, ratione veniam at expedita ipsum tempore, dolorum!</p>
<p>Natus quibusdam ratione molestias doloremque, repellat corporis, neque eaque, voluptatibus dignissimos, veritatis odit provident sint architecto assumenda officia nihil. Fugit dignissimos, quidem perspiciatis quia vero autem, vel asperiores consectetur
doloribus cumque quo, veritatis necessitatibus odio possimus debitis quae adipisci. Similique laudantium sed quisquam illo, alias, assumenda omnis voluptates molestias quam debitis officiis fugiat illum. Exercitationem.</p>
<p>Ratione, a earum, quam veritatis libero ducimus! Aliquid at dignissimos reiciendis recusandae illo ex nihil, officia aspernatur odit, ipsa beatae asperiores vel pariatur exercitationem quia unde, adipisci hic ea. Esse ducimus hic est pariatur deserunt
maxime minus dignissimos explicabo minima voluptas iure, illum itaque ex eligendi ut consequuntur recusandae, quod ipsam officia, odit iusto non.</p>
<p>Voluptatem officiis saepe ab aliquid sunt officia, quos voluptatibus veritatis ratione quam. Numquam laudantium aut facilis soluta, architecto officia, magni quas, eveniet suscipit, aperiam ipsa et! Reiciendis voluptates sequi ducimus explicabo facilis.
Aliquam accusamus natus doloremque perferendis, reprehenderit, praesentium consectetur ut fugit modi numquam nam sapiente ullam impedit! Labore, quam adipisci fugit illo quod tempora.</p>
<p>Amet ad adipisci beatae expedita omnis earum numquam officia, reprehenderit inventore. Cumque aspernatur delectus id placeat unde quo dolore molestias ratione eius consectetur nam aliquam, quam mollitia minus nemo necessitatibus quaerat facere facilis,
repellendus velit. Vel aliquam quo, mollitia doloremque eaque blanditiis sed quam temporibus optio illo accusamus rerum repellat animi delectus! Dolore, cum, asperiores?</p>
<p>Reiciendis a inventore et dolores eaque consequuntur distinctio est alias nesciunt voluptates obcaecati, vitae vel veniam culpa, sit minus odit aperiam dolor id natus earum repudiandae, doloribus ipsam. Voluptate unde officia adipisci minus libero dolor,
quo, rerum, quis voluptatibus ullam aperiam distinctio excepturi veniam! Aut perspiciatis, explicabo error cupiditate quis ad eveniet nulla maxime magni.</p>
<p>Vitae ea culpa voluptatem a id vel, deleniti fugiat suscipit ad ut qui, ipsum aliquid voluptate nisi ducimus. Qui facilis id suscipit harum quo, aliquid minus quasi nostrum aperiam atque illo optio quis repellat pariatur, quidem consequatur quas incidunt,
iusto molestias eaque! Reiciendis nulla et aspernatur omnis, consequuntur consequatur, quod saepe consectetur nobis atque eaque?</p>
<p>Reprehenderit saepe unde architecto eius recusandae eos eaque autem a facere eum, perferendis commodi temporibus aliquid. Possimus earum et, officiis aliquam id ipsam voluptas vitae maxime, eligendi sint fugiat nulla, excepturi soluta quia distinctio.
Ipsum natus quia excepturi nisi similique aperiam ea, nostrum expedita suscipit! Expedita quis, et ex pariatur, tenetur aliquam illum quia delectus.</p>
<p>Praesentium repudiandae, alias, recusandae sequi voluptate fugit ut dolore sapiente vitae, cupiditate debitis nobis. Quis vero natus, soluta quas atque, iure consectetur possimus labore ex quos! Sit ab nobis velit nesciunt cumque ad optio tenetur eaque
dolorem ipsam molestiae, fugiat voluptate enim, vero, porro repellendus inventore fuga molestias voluptates quo rerum magnam, officia suscipit cupiditate?</p>
<p>Esse itaque similique quos debitis a laboriosam, veniam quam fuga, sint in, minus nam at eligendi. Sequi voluptatum incidunt sunt. Ipsam vero repudiandae in, delectus laboriosam quam numquam dolores soluta sit! Debitis architecto, molestiae quisquam
ut consequatur libero. Impedit excepturi ratione, assumenda adipisci nulla aut laborum possimus, nam reprehenderit obcaecati facilis ullam error illum quisquam.</p>
<p>Doloribus praesentium nisi accusamus, eaque ducimus quos, voluptatibus adipisci. Aspernatur alias suscipit, minus esse dolores reprehenderit voluptas architecto! Accusamus voluptas sapiente placeat consequatur alias amet autem possimus commodi pariatur,
adipisci numquam neque sit ipsum aliquid quo facilis recusandae, voluptatibus at omnis ad odio, et ratione! Dolor ducimus suscipit quos eveniet dolores voluptate animi a maiores!</p>
<p>Necessitatibus corporis expedita ipsum voluptate praesentium dignissimos dolores dolorum non modi, dolor odio aliquam iusto cum ab inventore, aspernatur rerum qui quidem, eum, nisi suscipit tempora ea ratione quod adipisci. Saepe magnam laudantium explicabo
recusandae eligendi. Excepturi quo necessitatibus, itaque qui. Rerum quod sint repellat excepturi enim velit, consequuntur, in veniam quaerat provident possimus obcaecati.</p>
<p>Quasi aliquam facilis dolor dicta cupiditate, debitis ut praesentium autem impedit officiis repellendus iure ipsa non sint corrupti maiores officia incidunt! Inventore natus omnis deserunt laborum quos minima quaerat reprehenderit, dolorem totam aperiam
quo hic a ab incidunt dolore doloribus, blanditiis. A quisquam reprehenderit perferendis architecto accusantium ratione temporibus molestiae. Culpa eveniet inventore obcaecati sint.</p>
<p>Deserunt est doloremque quos! Illum magni nobis necessitatibus itaque ducimus quasi quod, incidunt quis eaque, molestias blanditiis. Incidunt recusandae odit in tempore nemo voluptatem totam odio, asperiores, perferendis, tempora laudantium quasi. Mollitia
blanditiis velit vero, quisquam nisi architecto tempora. Perspiciatis maxime fugiat eveniet. Repellendus natus eaque ipsa minus praesentium distinctio consectetur, culpa nesciunt commodi. In.</p>
<p>Animi saepe, in recusandae magni modi soluta, porro dolor natus, excepturi inventore consequuntur, ea explicabo sequi temporibus nobis quisquam enim quo itaque quas nulla alias et aperiam quos atque. Nihil, tempora ab dolor nobis nemo blanditiis odit
assumenda deleniti laudantium autem quae iusto, rerum placeat suscipit error illum esse fuga, deserunt aspernatur repellendus odio. Dolorum?</p>
<p>Ullam in mollitia nostrum itaque ex vitae animi laudantium placeat velit quibusdam numquam quam, tempore veniam, cumque, facilis. Optio impedit architecto quos sit officiis ab voluptates magni! Inventore voluptas, sunt illum tenetur nobis! Provident
adipisci sint commodi fuga sequi nostrum esse vero expedita aperiam, odio quod suscipit officia, in perferendis iste hic aut unde voluptatem.</p>
<p>Ullam beatae esse autem porro quaerat ipsa tempore error quasi blanditiis totam obcaecati iure id enim ipsum, soluta assumenda quidem! Sit unde cupiditate illum, accusamus voluptatibus. Assumenda eligendi ducimus libero, quas inventore dolorum, repellendus
fugiat quae, sapiente amet magni dolore expedita recusandae hic porro minus, molestiae reprehenderit impedit nihil accusantium necessitatibus veniam! Perferendis, voluptatem voluptatibus.</p>
<p>Fugiat molestiae excepturi fuga, suscipit sit accusamus dolorum, inventore ea aliquam alias, est. Fugiat, facere fugit ducimus labore distinctio, possimus ratione odio doloremque ullam quaerat ipsum sunt nisi ipsa voluptate veritatis dolore dolores
dolorum? Cum sequi itaque amet soluta laudantium, mollitia perferendis voluptatem error repudiandae laborum maxime nam quos expedita exercitationem, hic eius. Incidunt, voluptatem!</p>
<p>Commodi eveniet est quidem mollitia fugit, expedita cumque iste voluptatem, repudiandae optio dicta beatae excepturi, repellendus suscipit reiciendis, modi iusto animi sunt. Rerum magni, quibusdam cupiditate, enim incidunt eveniet nostrum repellendus
minus ipsa commodi. Saepe iste, ea obcaecati, maxime nesciunt expedita eligendi. Dicta deleniti, amet impedit ea id non cumque molestiae earum illum quo omnis.</p>
<p>Architecto enim fugit repudiandae totam placeat odio nobis dignissimos excepturi maxime, commodi esse itaque magnam facere voluptatem ipsam dicta veniam officia aperiam. Dolores, velit eum architecto accusantium facere, magnam laudantium ullam odit
aperiam pariatur similique quibusdam voluptate ducimus soluta porro enim eius, quisquam. Autem deserunt odit, excepturi perspiciatis harum fugiat facilis delectus dolorem enim voluptatum.</p>
<p>Minus at asperiores libero necessitatibus omnis iste quod officia consectetur quae architecto nesciunt, vero nobis, voluptatibus dolores! Eius quasi harum ducimus, voluptatem illum eligendi. Dignissimos, accusantium optio illum laborum numquam assumenda
hic deserunt qui debitis pariatur beatae consequatur ratione praesentium facere laboriosam, deleniti ea libero nam explicabo nobis dolorem quod sequi saepe odit sunt. Ab.</p>
<p>Libero nam, numquam deserunt eius earum. Dolores, assumenda, temporibus? Pariatur tempore suscipit iste, recusandae nobis asperiores maiores in officiis cumque saepe inventore, ad molestias aliquid tenetur unde magni esse facilis eius reprehenderit
ea dolores commodi. Soluta, quidem incidunt repudiandae totam harum sapiente vitae quam ipsum culpa unde odit fuga, molestiae minima non! Itaque, incidunt, provident?</p>
<p>Ratione, ipsam ullam laboriosam esse! Laborum nostrum praesentium necessitatibus, tenetur aspernatur. Velit tempora praesentium quisquam iusto a. Cumque odit sint, voluptatem totam cupiditate saepe officia eveniet dolorum quibusdam distinctio sequi,
rerum ullam iusto qui molestias autem excepturi minima amet praesentium eligendi repellendus laborum aperiam nostrum hic. Cum at, nulla fugiat esse quo provident doloremque! Itaque.</p>
<p>Facilis dolorum nulla asperiores iure soluta esse vero eveniet doloribus itaque totam ipsa assumenda, nisi labore sint quod voluptas natus eos quas ipsam error sequi. Voluptatem repudiandae, saepe adipisci quaerat amet perspiciatis alias natus id dignissimos
recusandae, corporis fugiat at quia? Molestiae sapiente voluptatem error eaque soluta nesciunt, iusto ea fugit nobis quia aliquid voluptas.</p>
<p>Eveniet, ipsam suscipit vitae alias, porro sint cumque totam cum unde tenetur obcaecati maiores odit impedit in placeat saepe, aliquid et labore illum maxime hic temporibus commodi! Quaerat molestias labore numquam repellendus quas eum earum aut repellat
officiis in iusto laboriosam expedita cupiditate ut tenetur vel dicta similique, temporibus error fugiat. Molestiae dolorum, saepe tempore.</p>
<p>Qui fugiat a maxime, quos quisquam dolorem, quo vel, sit, alias quia dicta porro consequatur assumenda ad magni. Nam, quae dignissimos. Delectus ea deleniti esse voluptas possimus, sed tempore adipisci sunt distinctio officiis iusto quo, sapiente reprehenderit
tenetur hic similique, praesentium illo. Voluptas commodi suscipit, aliquam debitis animi fugit, ullam quia repudiandae modi, saepe magni.</p>
<p>Neque, rerum, magnam. Quod at ratione sed reprehenderit corporis ad dolore natus, placeat inventore amet illum aperiam, earum debitis laboriosam distinctio quaerat optio porro eum libero, laudantium neque? Laborum, ipsa similique, omnis aliquam, voluptas,
fugiat hic autem eveniet ad debitis excepturi velit. Harum amet, facere inventore saepe accusantium autem cupiditate, adipisci, officia sequi enim aperiam?</p>
<p>Magnam, ullam iure officia a dicta dolor quae impedit autem sit id, sunt incidunt repellat cumque facere dolores. Excepturi aspernatur animi commodi natus laudantium officiis nostrum architecto tempore quis aut minus placeat nobis, ullam accusamus explicabo
possimus tempora expedita numquam eveniet non illum cupiditate recusandae quibusdam consequatur. Dolorum, earum cumque. Consectetur quaerat, mollitia debitis odio!</p>
<p>Natus ex laudantium alias officiis modi debitis delectus dignissimos! Nobis, quasi consequuntur rem accusantium odio minus, repellat magnam ipsam dignissimos mollitia sed quae et, laboriosam. Aliquam dicta, tempore suscipit! Ut nesciunt, quaerat velit
pariatur ipsam qui laboriosam ducimus, possimus voluptatum quam magni tenetur quidem praesentium architecto! Dolorum a blanditiis ut nobis eos asperiores, provident quibusdam.</p>
<p>Minima nulla nesciunt expedita aliquam officiis, sunt deserunt, asperiores optio aut saepe, cupiditate suscipit veniam dolore ipsum possimus fugit. Nihil omnis velit officiis nostrum itaque quasi fugit neque, fuga ad rem earum error sapiente incidunt
cupiditate totam, minima harum temporibus illum veritatis assumenda. Illum, laboriosam, delectus. Totam odit modi eligendi ad officia quae, unde. Doloribus.</p>
<p>Expedita accusamus ipsum recusandae aspernatur enim laudantium, dolor, nobis molestias aut quibusdam fuga cum, reprehenderit ex dicta possimus reiciendis illo repellat dignissimos ut numquam fugiat a tenetur. Maxime accusamus odit impedit. Amet optio
cum excepturi veniam! Accusamus expedita vero, porro facilis. Quidem exercitationem labore quam molestiae adipisci, neque fuga nostrum fugit deleniti. Dicta, porro rerum.</p>
<p>Deserunt iste corporis excepturi inventore tenetur, nam atque facilis laborum ab asperiores quis unde, illum non quia quo maxime corrupti perspiciatis ipsum aliquam molestiae dolores, harum consequatur? Voluptas natus excepturi pariatur sint nisi, rerum
quis velit dolor delectus tenetur molestiae explicabo eaque facilis soluta perferendis repudiandae magni alias deleniti molestias id earum, dolorum officia ex.</p>
<p>Tempore neque eveniet repellendus id impedit, nobis velit distinctio quasi ipsum. Vel, alias, qui! Voluptatem vero cupiditate enim animi explicabo labore officiis molestiae ex repudiandae nemo inventore harum, quae est ipsum sit rerum obcaecati praesentium
accusantium, itaque aliquid quos nihil. Non ipsam neque minima blanditiis nesciunt, similique nemo quam dolorum optio debitis ipsum eligendi est!</p>
<p>Error odit facere, hic maxime facilis tenetur commodi cum dolores id temporibus. Asperiores doloremque cupiditate fuga tempora totam aut ducimus dicta ab sapiente commodi? Eius quisquam, aliquam, quod rem aperiam dolor veritatis facere iusto accusantium
numquam beatae voluptate saepe itaque animi. Sequi ipsum nam accusamus quos molestiae, facere sapiente! Provident quasi eius nemo totam sequi?</p>
<p>Tenetur facere nihil recusandae quod saepe dolor, consequatur molestiae, explicabo hic rem. Dolor expedita, quos maxime aperiam alias iusto beatae. Pariatur doloremque in aperiam recusandae, excepturi assumenda corrupti nesciunt dignissimos, quos libero
ipsum. Nesciunt, fugit harum laboriosam culpa repellendus? Pariatur dicta perspiciatis aut nesciunt omnis hic eveniet, nam? Aliquid incidunt molestias, eaque sequi repellat voluptas.</p>
<p>Accusamus earum sed iste unde, doloribus odit voluptate voluptatibus nostrum, optio, cumque commodi delectus. Omnis nemo ea maiores, quaerat quam suscipit officia, facere iusto blanditiis debitis eligendi totam quas amet id repudiandae cupiditate excepturi
fuga consectetur quasi animi. Autem incidunt, ipsa et! Accusantium, nisi. Enim molestias voluptas alias, laboriosam quas. Molestiae dolorum iusto omnis nam!</p>
</div>
您的 2. 尝试非常接近。只需将滚动位置保留在变量中并在删除 class:
后滚动到那里
let bodyScroll = 0;
$('.menuBtn').click(function() {
if ($('.menu').hasClass('open')) {
$('body').removeClass('noScroll');
// The inline styles are not needed anymore
$('body').removeAttr('style');
// Scroll back to the saved position
$(window).scrollTop(bodyScroll);
$('.menu').removeClass('open');
} else {
// Save current scroll position
bodyScroll = $(window).scrollTop();
$('body').css('top', -(bodyScroll) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});
我试图通过单击汉堡包图标打开菜单时阻止页面滚动。我不想使用 css,因为当我创建 class "body.noScroll,html.noScroll{overflow: hidden}" 时,它会删除滚动条并导致页面逐渐变宽,导致菜单动画跳动并且看起来像垃圾。所以 CSS 是不行的。我搜索了这个网站并阅读了多种尝试方法。主要是这个页面Just disable scroll not hide it?
1. 我的第一次尝试:
function lockScroll(e) {
e.preventDefault();
}
$('.menuBtn').click(function(){
if( $('.menu').hasClass('open') ){
$('body').unbind('mousewheel touchmove', lockScroll);
$('.menu').removeClass('open');
}
else{
$('body').bind('mousewheel touchmove', lockScroll);
$('.menu').addClass('open');
}
});
但这给了我一个 jquery 错误:
[干预] 由于目标被视为被动,无法阻止被动事件侦听器中的默认设置
2. 我的第二次尝试似乎效果最好,但仍有一些问题:
CSS
body.noScroll{
position: fixed;
overflow-y: scroll;
}
jQuery
$('.menuBtn').click(function(){
if( $('.menu').hasClass('open') ){
$('body').css('top', - ($(window).scrollTop()) + 'px').removeClass('noScroll');
$('.menu').removeClass('open');
}
else{
$('body').css('top', - ($(window).scrollTop()) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});
这将在菜单打开时阻止滚动,但一旦您关闭菜单,滚动将重新启用,但它会跳回页面顶部。
我已经尝试了第三次尝试,但它与第二次尝试的效果相同(跳回页面顶部)。这是一个 fiddle 我尝试过的三个尝试 - Fiddle
非常感谢对此的任何帮助。
您可以使用一个变量来记住 window 的滚动条的当前位置,当菜单被赋予 .open
的 class 并且一旦 class被删除将当前滚动位置设置回交互之前的位置。
参见下面的示例:
let currentPos;
$('.menuBtn').click(function() {
if ($('.menu').hasClass('open')) {
$('body').css('top', -($(window).scrollTop()) + 'px').removeClass('noScroll');
$('.menu').removeClass('open');
// set the scroll back to where it should be
$(window).scrollTop(currentPos);
} else {
// remember where the scroll was
currentPos = $(window).scrollTop();
$('body').css('top', -($(window).scrollTop()) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
color: white;
margin: 0;
font-size: 13px;
}
body.noScroll {
position: fixed;
overflow-y: scroll;
/* width: 100%; */
}
.menuBtn {
border: 2px solid #FFF;
font-style: italic;
padding: 5px 10px;
display: inline-block;
position: fixed;
background-color: #20262E;
top: 20px;
left: 20px;
z-index: 999999;
cursor: pointer;
}
.menu {
position: fixed;
width: 100%;
height: 100vh;
background-color: rgba(22, 26, 31, 0.9);
z-index: 999998;
top: -100%;
left: 0;
transition: top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu.open {
top: 0;
transition: top 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.menu .menuTxt {
width: 100%;
height: 100vh;
position: relative;
}
.menu .menuTxt ul.menuTxtWrap {
position: absolute;
top: 50%;
left: 50%;
z-index: 999999;
margin: 0;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
padding: 0;
}
.menu .menuTxt ul.menuTxtWrap li {
list-style: none;
padding: 10px 0;
}
.info {
padding-top: 35px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menuBtn">Menu</div>
<div class="menu">
<div class="menuTxt">
<ul class="menuTxtWrap">
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div class="info">
<h1>Top Of Page</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est dolore iusto voluptatibus doloribus repudiandae aut laudantium voluptates perspiciatis velit! Repudiandae natus, obcaecati harum deserunt, omnis porro reprehenderit laborum esse impedit similique
ullam perspiciatis nihil incidunt saepe facilis aperiam dolore soluta voluptatibus quisquam praesentium libero sint. Minus quae alias deleniti nobis ratione rem saepe, cupiditate fugiat!</p>
<p>Quae, totam laudantium culpa, accusamus fugiat minima reiciendis excepturi, iusto autem aliquam rerum quo nulla repellendus obcaecati aspernatur. Neque iure velit, expedita eius error nisi dignissimos veritatis vel quis unde reprehenderit, perferendis
dolorum magni libero molestiae laborum minima architecto consequatur animi, tempore amet. Quaerat vel deserunt a fugit veritatis nostrum tenetur laudantium voluptatibus laborum inventore!</p>
<p>Dolorem tenetur voluptates non necessitatibus nulla accusamus provident illum laboriosam blanditiis recusandae exercitationem fugiat illo magni, dolorum, reprehenderit! Iure commodi, recusandae vel! Assumenda ut sapiente, quo, libero est non mollitia?
Iusto sit temporibus dignissimos consequatur tenetur quos nihil facere, culpa amet mollitia at ducimus placeat, quasi harum natus blanditiis sunt! Distinctio aperiam praesentium dolore, inventore!</p>
<p>Fugit atque odit, saepe incidunt modi magnam illo laboriosam debitis, ab similique tenetur earum placeat deleniti et ullam neque voluptatibus quam nihil, doloremque dignissimos pariatur! Cum velit, saepe, soluta libero temporibus odio. Exercitationem
voluptates accusantium deleniti perferendis neque eius architecto modi est cupiditate explicabo eaque perspiciatis suscipit dolorum corporis, ex incidunt temporibus. Ut, blanditiis magni?</p>
<p>Fugiat veritatis, impedit, alias iusto nam animi? Beatae delectus nulla iure reiciendis eius provident consequatur illo eum accusantium est quaerat praesentium ipsum culpa et distinctio consectetur omnis, odit dolor, consequuntur qui, veniam voluptate
amet. Obcaecati explicabo cupiditate, laborum nulla suscipit rem cum fuga iure blanditiis illum, pariatur nostrum fugiat voluptates earum animi ea minima adipisci!</p>
<p>Ea eius aliquam aut unde reprehenderit iusto explicabo error quae nesciunt quaerat, non, id quasi voluptatum excepturi assumenda natus minima incidunt, laboriosam! Provident odit dolor, ab quasi eligendi repudiandae quam porro unde voluptate dolore
aut fugit, reiciendis sapiente! Officiis dolorum delectus asperiores natus aliquam adipisci, soluta maiores, sint, optio mollitia voluptas voluptatum quod impedit doloribus.</p>
<p>Nulla numquam placeat dignissimos ab repellendus adipisci, dolorem tenetur optio, tempora dolores eius ad, dolore porro accusantium saepe eveniet perferendis. Ipsam, vitae cum, ullam asperiores eum, incidunt dolorum porro tenetur error officiis, ipsa
qui iure illum. Quas similique autem, numquam aliquam sequi pariatur quis consequatur, delectus ad assumenda aut ipsa inventore impedit maiores deserunt sapiente!</p>
<p>Repellat architecto ducimus maxime consectetur nobis, sint, et minima dolorem optio reiciendis nulla! Nihil quidem repellendus saepe laboriosam necessitatibus, odit, cupiditate impedit nobis, fugit quod, voluptatum neque. Id sapiente temporibus quasi.
Excepturi necessitatibus, minima in sint, cumque veritatis temporibus voluptatibus. Adipisci architecto quas voluptates, ut dolor. Amet, laudantium beatae quasi. Minus culpa eligendi, officia libero!</p>
<p>Doloremque, necessitatibus. Debitis, nisi, ratione molestiae ut odit voluptatum deleniti optio quo quis! Rerum aliquam quis aliquid ducimus ratione voluptate facilis numquam fugit mollitia, consectetur illo culpa. Distinctio atque incidunt, facere facilis
ipsa porro aliquam nam sit earum expedita, dolore ea corporis suscipit veritatis neque at aspernatur rerum dolores minus quibusdam fugiat odio magnam quasi.</p>
<p>Ipsum consequuntur asperiores, sequi voluptas doloremque cum. Vitae ullam illum nihil excepturi possimus consequuntur veniam, harum quam expedita facere consectetur dignissimos voluptas tenetur ipsa in illo mollitia fugit eos sint enim ea ab? Quam error
animi nihil incidunt debitis dolorum dicta placeat porro, nulla officiis blanditiis odio harum aliquam eveniet mollitia, facilis enim repellendus ea!</p>
<p>Corporis dolores a voluptatibus. Quos obcaecati voluptates et delectus beatae, ipsa dolores consectetur rem aspernatur perspiciatis dignissimos nisi deserunt sequi, neque, repudiandae unde commodi voluptatum dolorum alias suscipit tempore sed accusamus
repellat est. Architecto maiores voluptates deleniti incidunt fugiat. Dolorem, vel? Repudiandae corporis iste blanditiis, voluptates officia excepturi harum assumenda adipisci maiores quisquam, non eligendi.</p>
<p>Eaque laborum obcaecati voluptas voluptatum mollitia dolor optio aspernatur nostrum culpa officia. Quidem fuga nam totam quam ut molestiae perspiciatis doloribus aut, ea neque at voluptate officiis mollitia, ex temporibus corporis accusantium excepturi
dolorem enim reprehenderit modi doloremque maxime, repellendus nobis! Reprehenderit sequi adipisci amet harum ad enim quas, mollitia alias! Voluptatem aliquam ipsa minima.</p>
<p>Officia maiores cum ipsum blanditiis consequuntur. Alias iure, sunt magnam enim omnis suscipit quibusdam odio, quam earum veniam aliquam voluptatem sit totam iste, deleniti temporibus corrupti accusantium reprehenderit explicabo reiciendis provident
quod doloribus! Soluta totam, molestiae aliquid voluptas, vero facere dolores illum accusantium deleniti quam repellat nam blanditiis ratione quasi, consequuntur qui cupiditate. Tempora, consectetur.</p>
<p>Voluptatem modi dolor, facilis numquam eligendi pariatur delectus tempore porro perferendis sint, cum accusantium nam eos voluptatum, debitis minima. Tempore blanditiis veniam odio magnam quisquam, et, distinctio assumenda sit consequatur reprehenderit
quos cumque vel! Nobis, possimus, rem! Hic soluta, rem facilis, non, tempore suscipit optio voluptates dicta est nesciunt facere exercitationem necessitatibus. Omnis, veniam, doloribus.</p>
<p>Quaerat laboriosam at sint quod. Quae unde rem magnam sint vero sit, fuga eum, aperiam temporibus odio officia quis autem deserunt quod. Quam distinctio laborum ducimus dignissimos rem eaque eum doloribus aspernatur corporis, harum officia magnam iure
repellendus inventore dolor voluptatem quaerat sint laboriosam vel tempora enim quibusdam accusantium. Laborum eveniet molestias minus, numquam voluptas?</p>
<p>Fugiat dolore aliquam impedit dicta temporibus sapiente quod! Optio atque magnam ab omnis dolores cum enim reiciendis. Itaque explicabo repellendus rem esse ad soluta quia mollitia vel porro quam iusto blanditiis harum aliquam, iure sequi tempora. Sunt
omnis quidem aliquam earum esse veniam accusantium hic recusandae amet error ab explicabo, ducimus quam placeat ullam. Hic.</p>
<p>Perferendis necessitatibus voluptatum facere eveniet laudantium quisquam accusamus natus porro? Magnam iusto voluptate, repellendus sapiente explicabo nostrum dolore libero asperiores debitis. Itaque molestias, repudiandae dicta, debitis consequuntur
non magni doloribus illo distinctio autem unde. Voluptates explicabo deserunt suscipit nisi quo veniam, maxime, dolore soluta, cum animi delectus. Laborum saepe ea, voluptates minima, obcaecati soluta quidem!</p>
<p>Perferendis, doloribus eaque deleniti inventore quisquam praesentium. Unde quia repudiandae reprehenderit eos alias. Numquam aut iste quos molestias quaerat fuga corporis sit ipsum deserunt aliquam velit cupiditate aperiam explicabo, reiciendis necessitatibus
reprehenderit excepturi nemo temporibus, laudantium tempore voluptatum amet dolores illum soluta? Eius nobis alias ut commodi optio error vel mollitia ea ullam, minima aliquid?</p>
<p>Eos amet tempora natus. Labore beatae temporibus nisi adipisci veritatis doloribus quod. Sit a nisi doloremque consequatur saepe, aliquid corporis, quo iusto dolores id expedita! Quos debitis, voluptates eligendi mollitia veniam similique, ab pariatur
deserunt optio voluptate expedita commodi dolores! Voluptate nostrum, illum totam culpa aut officiis molestias magnam ullam cum earum? Cupiditate, iusto, ducimus.</p>
<p>Dolorem veniam incidunt fuga quaerat corrupti cumque est ab, vel consequuntur similique suscipit maiores excepturi aut harum, placeat, dolor. Impedit beatae necessitatibus facere cum eum, voluptate sint vero quod porro hic ratione assumenda, libero
quasi repellendus eius quae possimus, quos itaque iure. Placeat odio eveniet debitis temporibus, nam, ratione veniam at expedita ipsum tempore, dolorum!</p>
<p>Natus quibusdam ratione molestias doloremque, repellat corporis, neque eaque, voluptatibus dignissimos, veritatis odit provident sint architecto assumenda officia nihil. Fugit dignissimos, quidem perspiciatis quia vero autem, vel asperiores consectetur
doloribus cumque quo, veritatis necessitatibus odio possimus debitis quae adipisci. Similique laudantium sed quisquam illo, alias, assumenda omnis voluptates molestias quam debitis officiis fugiat illum. Exercitationem.</p>
<p>Ratione, a earum, quam veritatis libero ducimus! Aliquid at dignissimos reiciendis recusandae illo ex nihil, officia aspernatur odit, ipsa beatae asperiores vel pariatur exercitationem quia unde, adipisci hic ea. Esse ducimus hic est pariatur deserunt
maxime minus dignissimos explicabo minima voluptas iure, illum itaque ex eligendi ut consequuntur recusandae, quod ipsam officia, odit iusto non.</p>
<p>Voluptatem officiis saepe ab aliquid sunt officia, quos voluptatibus veritatis ratione quam. Numquam laudantium aut facilis soluta, architecto officia, magni quas, eveniet suscipit, aperiam ipsa et! Reiciendis voluptates sequi ducimus explicabo facilis.
Aliquam accusamus natus doloremque perferendis, reprehenderit, praesentium consectetur ut fugit modi numquam nam sapiente ullam impedit! Labore, quam adipisci fugit illo quod tempora.</p>
<p>Amet ad adipisci beatae expedita omnis earum numquam officia, reprehenderit inventore. Cumque aspernatur delectus id placeat unde quo dolore molestias ratione eius consectetur nam aliquam, quam mollitia minus nemo necessitatibus quaerat facere facilis,
repellendus velit. Vel aliquam quo, mollitia doloremque eaque blanditiis sed quam temporibus optio illo accusamus rerum repellat animi delectus! Dolore, cum, asperiores?</p>
<p>Reiciendis a inventore et dolores eaque consequuntur distinctio est alias nesciunt voluptates obcaecati, vitae vel veniam culpa, sit minus odit aperiam dolor id natus earum repudiandae, doloribus ipsam. Voluptate unde officia adipisci minus libero dolor,
quo, rerum, quis voluptatibus ullam aperiam distinctio excepturi veniam! Aut perspiciatis, explicabo error cupiditate quis ad eveniet nulla maxime magni.</p>
<p>Vitae ea culpa voluptatem a id vel, deleniti fugiat suscipit ad ut qui, ipsum aliquid voluptate nisi ducimus. Qui facilis id suscipit harum quo, aliquid minus quasi nostrum aperiam atque illo optio quis repellat pariatur, quidem consequatur quas incidunt,
iusto molestias eaque! Reiciendis nulla et aspernatur omnis, consequuntur consequatur, quod saepe consectetur nobis atque eaque?</p>
<p>Reprehenderit saepe unde architecto eius recusandae eos eaque autem a facere eum, perferendis commodi temporibus aliquid. Possimus earum et, officiis aliquam id ipsam voluptas vitae maxime, eligendi sint fugiat nulla, excepturi soluta quia distinctio.
Ipsum natus quia excepturi nisi similique aperiam ea, nostrum expedita suscipit! Expedita quis, et ex pariatur, tenetur aliquam illum quia delectus.</p>
<p>Praesentium repudiandae, alias, recusandae sequi voluptate fugit ut dolore sapiente vitae, cupiditate debitis nobis. Quis vero natus, soluta quas atque, iure consectetur possimus labore ex quos! Sit ab nobis velit nesciunt cumque ad optio tenetur eaque
dolorem ipsam molestiae, fugiat voluptate enim, vero, porro repellendus inventore fuga molestias voluptates quo rerum magnam, officia suscipit cupiditate?</p>
<p>Esse itaque similique quos debitis a laboriosam, veniam quam fuga, sint in, minus nam at eligendi. Sequi voluptatum incidunt sunt. Ipsam vero repudiandae in, delectus laboriosam quam numquam dolores soluta sit! Debitis architecto, molestiae quisquam
ut consequatur libero. Impedit excepturi ratione, assumenda adipisci nulla aut laborum possimus, nam reprehenderit obcaecati facilis ullam error illum quisquam.</p>
<p>Doloribus praesentium nisi accusamus, eaque ducimus quos, voluptatibus adipisci. Aspernatur alias suscipit, minus esse dolores reprehenderit voluptas architecto! Accusamus voluptas sapiente placeat consequatur alias amet autem possimus commodi pariatur,
adipisci numquam neque sit ipsum aliquid quo facilis recusandae, voluptatibus at omnis ad odio, et ratione! Dolor ducimus suscipit quos eveniet dolores voluptate animi a maiores!</p>
<p>Necessitatibus corporis expedita ipsum voluptate praesentium dignissimos dolores dolorum non modi, dolor odio aliquam iusto cum ab inventore, aspernatur rerum qui quidem, eum, nisi suscipit tempora ea ratione quod adipisci. Saepe magnam laudantium explicabo
recusandae eligendi. Excepturi quo necessitatibus, itaque qui. Rerum quod sint repellat excepturi enim velit, consequuntur, in veniam quaerat provident possimus obcaecati.</p>
<p>Quasi aliquam facilis dolor dicta cupiditate, debitis ut praesentium autem impedit officiis repellendus iure ipsa non sint corrupti maiores officia incidunt! Inventore natus omnis deserunt laborum quos minima quaerat reprehenderit, dolorem totam aperiam
quo hic a ab incidunt dolore doloribus, blanditiis. A quisquam reprehenderit perferendis architecto accusantium ratione temporibus molestiae. Culpa eveniet inventore obcaecati sint.</p>
<p>Deserunt est doloremque quos! Illum magni nobis necessitatibus itaque ducimus quasi quod, incidunt quis eaque, molestias blanditiis. Incidunt recusandae odit in tempore nemo voluptatem totam odio, asperiores, perferendis, tempora laudantium quasi. Mollitia
blanditiis velit vero, quisquam nisi architecto tempora. Perspiciatis maxime fugiat eveniet. Repellendus natus eaque ipsa minus praesentium distinctio consectetur, culpa nesciunt commodi. In.</p>
<p>Animi saepe, in recusandae magni modi soluta, porro dolor natus, excepturi inventore consequuntur, ea explicabo sequi temporibus nobis quisquam enim quo itaque quas nulla alias et aperiam quos atque. Nihil, tempora ab dolor nobis nemo blanditiis odit
assumenda deleniti laudantium autem quae iusto, rerum placeat suscipit error illum esse fuga, deserunt aspernatur repellendus odio. Dolorum?</p>
<p>Ullam in mollitia nostrum itaque ex vitae animi laudantium placeat velit quibusdam numquam quam, tempore veniam, cumque, facilis. Optio impedit architecto quos sit officiis ab voluptates magni! Inventore voluptas, sunt illum tenetur nobis! Provident
adipisci sint commodi fuga sequi nostrum esse vero expedita aperiam, odio quod suscipit officia, in perferendis iste hic aut unde voluptatem.</p>
<p>Ullam beatae esse autem porro quaerat ipsa tempore error quasi blanditiis totam obcaecati iure id enim ipsum, soluta assumenda quidem! Sit unde cupiditate illum, accusamus voluptatibus. Assumenda eligendi ducimus libero, quas inventore dolorum, repellendus
fugiat quae, sapiente amet magni dolore expedita recusandae hic porro minus, molestiae reprehenderit impedit nihil accusantium necessitatibus veniam! Perferendis, voluptatem voluptatibus.</p>
<p>Fugiat molestiae excepturi fuga, suscipit sit accusamus dolorum, inventore ea aliquam alias, est. Fugiat, facere fugit ducimus labore distinctio, possimus ratione odio doloremque ullam quaerat ipsum sunt nisi ipsa voluptate veritatis dolore dolores
dolorum? Cum sequi itaque amet soluta laudantium, mollitia perferendis voluptatem error repudiandae laborum maxime nam quos expedita exercitationem, hic eius. Incidunt, voluptatem!</p>
<p>Commodi eveniet est quidem mollitia fugit, expedita cumque iste voluptatem, repudiandae optio dicta beatae excepturi, repellendus suscipit reiciendis, modi iusto animi sunt. Rerum magni, quibusdam cupiditate, enim incidunt eveniet nostrum repellendus
minus ipsa commodi. Saepe iste, ea obcaecati, maxime nesciunt expedita eligendi. Dicta deleniti, amet impedit ea id non cumque molestiae earum illum quo omnis.</p>
<p>Architecto enim fugit repudiandae totam placeat odio nobis dignissimos excepturi maxime, commodi esse itaque magnam facere voluptatem ipsam dicta veniam officia aperiam. Dolores, velit eum architecto accusantium facere, magnam laudantium ullam odit
aperiam pariatur similique quibusdam voluptate ducimus soluta porro enim eius, quisquam. Autem deserunt odit, excepturi perspiciatis harum fugiat facilis delectus dolorem enim voluptatum.</p>
<p>Minus at asperiores libero necessitatibus omnis iste quod officia consectetur quae architecto nesciunt, vero nobis, voluptatibus dolores! Eius quasi harum ducimus, voluptatem illum eligendi. Dignissimos, accusantium optio illum laborum numquam assumenda
hic deserunt qui debitis pariatur beatae consequatur ratione praesentium facere laboriosam, deleniti ea libero nam explicabo nobis dolorem quod sequi saepe odit sunt. Ab.</p>
<p>Libero nam, numquam deserunt eius earum. Dolores, assumenda, temporibus? Pariatur tempore suscipit iste, recusandae nobis asperiores maiores in officiis cumque saepe inventore, ad molestias aliquid tenetur unde magni esse facilis eius reprehenderit
ea dolores commodi. Soluta, quidem incidunt repudiandae totam harum sapiente vitae quam ipsum culpa unde odit fuga, molestiae minima non! Itaque, incidunt, provident?</p>
<p>Ratione, ipsam ullam laboriosam esse! Laborum nostrum praesentium necessitatibus, tenetur aspernatur. Velit tempora praesentium quisquam iusto a. Cumque odit sint, voluptatem totam cupiditate saepe officia eveniet dolorum quibusdam distinctio sequi,
rerum ullam iusto qui molestias autem excepturi minima amet praesentium eligendi repellendus laborum aperiam nostrum hic. Cum at, nulla fugiat esse quo provident doloremque! Itaque.</p>
<p>Facilis dolorum nulla asperiores iure soluta esse vero eveniet doloribus itaque totam ipsa assumenda, nisi labore sint quod voluptas natus eos quas ipsam error sequi. Voluptatem repudiandae, saepe adipisci quaerat amet perspiciatis alias natus id dignissimos
recusandae, corporis fugiat at quia? Molestiae sapiente voluptatem error eaque soluta nesciunt, iusto ea fugit nobis quia aliquid voluptas.</p>
<p>Eveniet, ipsam suscipit vitae alias, porro sint cumque totam cum unde tenetur obcaecati maiores odit impedit in placeat saepe, aliquid et labore illum maxime hic temporibus commodi! Quaerat molestias labore numquam repellendus quas eum earum aut repellat
officiis in iusto laboriosam expedita cupiditate ut tenetur vel dicta similique, temporibus error fugiat. Molestiae dolorum, saepe tempore.</p>
<p>Qui fugiat a maxime, quos quisquam dolorem, quo vel, sit, alias quia dicta porro consequatur assumenda ad magni. Nam, quae dignissimos. Delectus ea deleniti esse voluptas possimus, sed tempore adipisci sunt distinctio officiis iusto quo, sapiente reprehenderit
tenetur hic similique, praesentium illo. Voluptas commodi suscipit, aliquam debitis animi fugit, ullam quia repudiandae modi, saepe magni.</p>
<p>Neque, rerum, magnam. Quod at ratione sed reprehenderit corporis ad dolore natus, placeat inventore amet illum aperiam, earum debitis laboriosam distinctio quaerat optio porro eum libero, laudantium neque? Laborum, ipsa similique, omnis aliquam, voluptas,
fugiat hic autem eveniet ad debitis excepturi velit. Harum amet, facere inventore saepe accusantium autem cupiditate, adipisci, officia sequi enim aperiam?</p>
<p>Magnam, ullam iure officia a dicta dolor quae impedit autem sit id, sunt incidunt repellat cumque facere dolores. Excepturi aspernatur animi commodi natus laudantium officiis nostrum architecto tempore quis aut minus placeat nobis, ullam accusamus explicabo
possimus tempora expedita numquam eveniet non illum cupiditate recusandae quibusdam consequatur. Dolorum, earum cumque. Consectetur quaerat, mollitia debitis odio!</p>
<p>Natus ex laudantium alias officiis modi debitis delectus dignissimos! Nobis, quasi consequuntur rem accusantium odio minus, repellat magnam ipsam dignissimos mollitia sed quae et, laboriosam. Aliquam dicta, tempore suscipit! Ut nesciunt, quaerat velit
pariatur ipsam qui laboriosam ducimus, possimus voluptatum quam magni tenetur quidem praesentium architecto! Dolorum a blanditiis ut nobis eos asperiores, provident quibusdam.</p>
<p>Minima nulla nesciunt expedita aliquam officiis, sunt deserunt, asperiores optio aut saepe, cupiditate suscipit veniam dolore ipsum possimus fugit. Nihil omnis velit officiis nostrum itaque quasi fugit neque, fuga ad rem earum error sapiente incidunt
cupiditate totam, minima harum temporibus illum veritatis assumenda. Illum, laboriosam, delectus. Totam odit modi eligendi ad officia quae, unde. Doloribus.</p>
<p>Expedita accusamus ipsum recusandae aspernatur enim laudantium, dolor, nobis molestias aut quibusdam fuga cum, reprehenderit ex dicta possimus reiciendis illo repellat dignissimos ut numquam fugiat a tenetur. Maxime accusamus odit impedit. Amet optio
cum excepturi veniam! Accusamus expedita vero, porro facilis. Quidem exercitationem labore quam molestiae adipisci, neque fuga nostrum fugit deleniti. Dicta, porro rerum.</p>
<p>Deserunt iste corporis excepturi inventore tenetur, nam atque facilis laborum ab asperiores quis unde, illum non quia quo maxime corrupti perspiciatis ipsum aliquam molestiae dolores, harum consequatur? Voluptas natus excepturi pariatur sint nisi, rerum
quis velit dolor delectus tenetur molestiae explicabo eaque facilis soluta perferendis repudiandae magni alias deleniti molestias id earum, dolorum officia ex.</p>
<p>Tempore neque eveniet repellendus id impedit, nobis velit distinctio quasi ipsum. Vel, alias, qui! Voluptatem vero cupiditate enim animi explicabo labore officiis molestiae ex repudiandae nemo inventore harum, quae est ipsum sit rerum obcaecati praesentium
accusantium, itaque aliquid quos nihil. Non ipsam neque minima blanditiis nesciunt, similique nemo quam dolorum optio debitis ipsum eligendi est!</p>
<p>Error odit facere, hic maxime facilis tenetur commodi cum dolores id temporibus. Asperiores doloremque cupiditate fuga tempora totam aut ducimus dicta ab sapiente commodi? Eius quisquam, aliquam, quod rem aperiam dolor veritatis facere iusto accusantium
numquam beatae voluptate saepe itaque animi. Sequi ipsum nam accusamus quos molestiae, facere sapiente! Provident quasi eius nemo totam sequi?</p>
<p>Tenetur facere nihil recusandae quod saepe dolor, consequatur molestiae, explicabo hic rem. Dolor expedita, quos maxime aperiam alias iusto beatae. Pariatur doloremque in aperiam recusandae, excepturi assumenda corrupti nesciunt dignissimos, quos libero
ipsum. Nesciunt, fugit harum laboriosam culpa repellendus? Pariatur dicta perspiciatis aut nesciunt omnis hic eveniet, nam? Aliquid incidunt molestias, eaque sequi repellat voluptas.</p>
<p>Accusamus earum sed iste unde, doloribus odit voluptate voluptatibus nostrum, optio, cumque commodi delectus. Omnis nemo ea maiores, quaerat quam suscipit officia, facere iusto blanditiis debitis eligendi totam quas amet id repudiandae cupiditate excepturi
fuga consectetur quasi animi. Autem incidunt, ipsa et! Accusantium, nisi. Enim molestias voluptas alias, laboriosam quas. Molestiae dolorum iusto omnis nam!</p>
</div>
您的 2. 尝试非常接近。只需将滚动位置保留在变量中并在删除 class:
后滚动到那里let bodyScroll = 0;
$('.menuBtn').click(function() {
if ($('.menu').hasClass('open')) {
$('body').removeClass('noScroll');
// The inline styles are not needed anymore
$('body').removeAttr('style');
// Scroll back to the saved position
$(window).scrollTop(bodyScroll);
$('.menu').removeClass('open');
} else {
// Save current scroll position
bodyScroll = $(window).scrollTop();
$('body').css('top', -(bodyScroll) + 'px').addClass('noScroll');
$('.menu').addClass('open');
}
});