使用jQuery而不是CSS阻止按钮单击时滚动页面

Question

我试图通过单击汉堡包图标来防止页面滚动打开菜单。我不想使用css，因为当我创建类“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错误：

“[干预]由于目标被视为被动，无法阻止被动事件监听器内的默认”

我的第二次尝试似乎效果最好，但仍有一些问题：

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');
  }
});

当菜单打开时，这将阻止滚动但是一旦关闭菜单，重新启用滚动但它会跳回到页面顶部。

我尝试过第3次尝试，但它与第二次尝试相同（跳回到页面顶部）。这是我试过的三次尝试的小提琴 - Fiddle

非常感谢任何帮助。

Answer 1

你的尝试非常接近。只需将滚动位置保存在变量中，然后在删除类后滚动它：

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');
  }
});

Answer 2

当菜单被赋予.open类时，您可以使用变量来记住窗口滚动条的当前位置，一旦删除了类，将当前滚动位置设置回交互之前的位置。

请参阅以下示例：

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>