防止内容因位置跳变而固定

Question

我正在尝试制作具有3D变换效果的菜单。问题是，当您在打开菜单之前向下滚动一点，然后再打开菜单时，它将始终跳至页面顶部，而不是停留在当前位置。

只需向下滚动并单击页面上的任意位置以打开菜单，您就会明白我的意思。

如何防止这种情况发生？

public class OutputElapsedTimeCommand : BeforeAndAfterTestCommand
{
    private Stopwatch _sw;

    public OutputElapsedTimeCommand(TestCommand innerCommand) : base(innerCommand)
    {
        BeforeTest = ctx => { _sw = Stopwatch.StartNew(); };
        AfterTest = ctx =>
        {
            _sw.Stop();
            ctx.OutWriter.WriteLineAsync($"Took: {_sw.ElapsedMilliseconds}ms");
        };
    }
}

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

要解释一下有点棘手，here is a Codepen link

这是我从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>

Updated codepen