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           


        

Answer 1

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');
});

Answer 2

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

Answer 3

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.

Answer 4

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%); 
}