防止內容在位置更改為固定時跳轉

Question

我正在嘗試制作具有轉換 3d 效果的菜單。 問題是，當您在打開菜單之前向下滾動一點，然后打開菜單時，它總是會跳到頁面頂部，而不是停留在您當前所在的位置。

只需向下滾動一點並單擊頁面上的任意位置以打開菜單，您就會明白我的意思。

我怎樣才能防止這種情況發生？

 $(function() { $("div#container").click(function() { if ($("body").hasClass("animate")) { $("body").removeClass("animate"); setTimeout(function() { $("body").removeClass("modalview"); }, 600); } else { $("body").addClass("animate").addClass("modalview"); } }); });

 * { margin: 0; padding: 0; box-sizing: border-box; } div#container { height: 100%; width: 100vw; position: relative; z-index: 101; transition: all .6s ease-in-out; } div#container content { height: 100%; width: 100%; display: block; } .box { width: 100vw; height: 100vh; } .box:nth-child(1) { background: #2ecc71; } .box:nth-child(2) { background: #e74c3c; } .box:nth-child(3) { background: #3498db; } div#nav { position: fixed; top: 0; left: 0; padding: 5%; z-index: 100; width: 100%; height: 100%; } div#wrapper { position: relative; width: 100%; height: 100%; left: 0px; } body.modalview div#wrapper { position: fixed; -webkit-perspective: 1500px; perspective: 1500px; } body.animate div#container { -webkit-transform: translateZ(0px) translateX(10%) rotateY(-50deg); transform: translateZ(0) translateX(10%) rotateY(-50deg); } body.modalview div#container { position: absolute; overflow: hidden; cursor: pointer; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } body.modalview div#container background { overflow: hidden; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div id="container"> <content> <div class="box"></div> <div class="box"></div> <div class="box"></div> </content> </div> <div id="nav"> <div id="nav-inner"> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> </div> </div> </div>

解釋起來有點棘手，所以這里有一個 Codepen 鏈接

這是我從這里得到想法的網站： https : //www.badruttspalace.com ，我試圖重建它，但我沒有完全做到

Answer 1

我已經改變了這一點，以便內容現在是 100vh 並處理滾動，這樣您就可以為容器設置動畫，並且不應該影響滾動的位置。

我還禁用了指針事件以防止在動畫發生時滾動。

 $(function() { $("div#container").click(function() { if ($("body").hasClass("animate")) { $("body").removeClass("animate"); setTimeout(function() { $("body").removeClass("modalview"); }, 600); } else { $("body").addClass("animate").addClass("modalview"); } }); });

 body, html { overflow:hidden; } * { margin: 0; padding: 0; box-sizing: border-box; } div#container { height: 100%; width: 100%; position: relative; z-index: 101; transition: all .6s ease-in-out; } div#container content { height: 100vh; width: 100%; display: block; overflow: auto; } .box { width: 100%; height: 100vh; } .box:nth-child(1) { background: #2ecc71; } .box:nth-child(2) { background: #e74c3c; } .box:nth-child(3) { background: #3498db; } div#nav { position: fixed; top: 0; left: 0; padding: 5%; z-index: 100; width: 100%; height: 100%; } #wrapper { position: relative; width: 100%; height: 100%; left:0px; } body.modalview div#wrapper { position:fixed; -webkit-perspective: 1500px; perspective: 1500px; } body.animate div#container { -webkit-transform: translateZ(0px) translateX(10%) rotateY(-50deg); transform: translateZ(0) translateX(10%) rotateY(-50deg); } body.modalview div#container { position: absolute; overflow: hidden; cursor: pointer; height: 100%; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; } body.modalview content { pointer-events: none; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="wrapper"> <div id="container"> <content> <div class="box"></div> <div class="box"></div> <div class="box"></div> </content> </div> <div id="nav"> <div id="nav-inner"> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> <div>Lorem Ipsum</div> </div> </div> </div>

更新代碼筆

Answer 2

如果你刪除這個

body.modalview div#container {
  overflow: hidden;
}

它不會將滾動條移到頂部，不確定這是否是所需的行為。