防止内容在位置更改为固定时跳转

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

它不会将滚动条移到顶部，不确定这是否是所需的行为。