Scrollbar appears through CSS animation/transition

All we need is an easy explanation of the problem, so here it is.

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?

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 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.

Method 2

Two alternative to solve the flickering problem (movement left/right that happens with scrollbars appearing/disappearing fast)

display scrollbars all the time.

body {
  overflow-y: scroll;
}

This hack (info)

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

Method 3

I faced the same problem. This is how I solved it (I’m using my own code as an example)

HTML

<div class="team-box-2-info">
    <h4>John Doe</h4>
    <h6>Programmer</h6>
    <p class="team-box-2-desc">Lorem ipsum dolor sit amet consectetum...</p>
</div>

CSS

.team-box-2-desc {
    max-height: 0;
    overflow-y: hidden;
    transition: max-height 0.5s ease-out;
}
.team-box-2:hover .team-box-2-desc{
    max-height: 350px;
    transition: max-height 1s ease-in;
}

JS

$('.team-box-2').hover(function(){
    var element = $(this);
    setTimeout(function(){
        element.find('p.team-box-2-desc').css('overflow-y', 'auto');
    }, 1000);
}, function(){
    $(this).find('p.team-box-2-desc').css('overflow-y', 'hidden');
});

Method 4

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

Method 5

There is a solution here to hide scrollbar temporary during transition animation using keyframes
https://css-tricks.com/hide-scrollbars-during-an-animation/

Method 6

A simple hack I do is create a keyframe, that has a longer duration than the animation and add it to the Html as an animation;

CSS

html,
body {
  max-width: 100%; /* n/a
  overflow-x: hidden;
  animation: hide-scroll 3s; /*my longest animation is 2.7s */
}

@keyframes hide-scroll {
  from,
  to {
    overflow: hidden;
  }
}

This method helps if you want the scrollbar showing on other pages. – you can create a fade-in etc. play around with the animation keyframes to your liking.

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply