滚动条通过 CSS animation/transition 出现

Question

我在 Angular 中使用 立方贝塞尔 过渡动画我的 ng-view：

 /* Animations */
.slide-animation.ng-enter, .slide-animation.ng-leave  {
  -webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  -o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
  transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;

  position:absolute;
}

.slide-animation.ng-enter {
  opacity:0;
  left:300px;
  overflow-y: hidden;
  overflow-x:hidden;
}

.slide-animation.ng-enter.ng-enter-active {
  opacity:1;
  left: 0;
  top: 0;
}

.slide-animation.ng-leave {
  opacity:0;
  left: 0;
  top: 0;
}

.slide-animation.ng-leave.ng-leave-active {
  opacity:0;
  left: 0;
  top: 0;
}

一切正常， 除了在输入内容时出现的滚动条。 它从右侧移动到左侧（如您在代码中所见）。

我想在动画期间隐藏滚动条。

我究竟做错了什么？

原文由 ohboy21 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您需要在 body CSS 中设置 overflow:hidden —。但请注意，添加它会隐藏所有溢出的内容，包括垂直滚动条，您不想这样做，因为如果高度溢出，页面内容将被隐藏。因此，如果您正在使用幻灯片过渡（向侧面）并且只想隐藏过渡期间出现的水平滚动条，请改用它：

  body {
    overflow-x:hidden;
}

这样，您只是隐藏了水平滚动条，而垂直滚动条仍然有效。

原文由 Neel 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

解决闪烁问题的两种选择（滚动条快速出现/消失时发生的左/右移动）

一直显示滚动条。

 body {
  overflow-y: scroll;
}

这个黑客（ 信息）

 html {
  margin-left: calc(100vw - 100%);
}

原文由 GiorgosK 发布，翻译遵循 CC BY-SA 4.0 许可协议