当溢出-x：隐藏时向上滚动页面溢出y：滚动； （视差）

Question

我想使用视差效果并使scrollTop工作： 我的CSS是：

.MainContainer {
  perspective: 1px;
  transform-style: preserve-3d;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: scroll;
}

.ParallaxContainer {
  display: flex;
  flex: 1 0 auto;
  position: relative;
  height: 100vh;
  transform: translateZ(-1px) scale(2.02);
  z-index: -1;
}

.ContentContainer {
  display: block;
  position: relative;
  background-color: white;
  z-index: 1;
}

此css代码可平滑地应用视差效果（按预期方式工作）。但是当我尝试滚动到顶部时：

$('.test_click').on('click', function(event){   
    event.preventDefault();
    $('html,body').animate({scrollTop:0}, 500);
});

它不向上滚动！使其滚动的唯一方法是删除“ overflow-x：隐藏； overflow-y：滚动；”。在MainContainer中..但是如果执行此操作，则视差效果将不再起作用。你能帮我吗？