Scrollbar appears through CSS animation/transition

Question

I am animating my ng-view in Angular with a cubic-bezier transition:

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

Everything works fine, except of the scrollbar which appears when the content is entering. It moves from the right to the left side (as you can see in the code).

I want to hide the scrollbar during the animation.

What am i doing wrong?

Answer 1

You need to set overflow:hidden in the body css. But note that, adding this will hide all overflown contents including the vertical scroll bar and you dont want to do that since the page contents will be hidden if the height is overflown. So if you are using a slide transition (sidewards) and you only want to hide the horizontal scroll bar that appears during transition, then use this instead:

 body {     overflow-x:hidden;   } 

This way, you are only hiding the horizontal scroll bar and the vertical scroll bar will still work.