CSS Hide Scrollbar when Position Absolute Object Moves out of Screen (in Angular 6)

I have a message that is shown on the bottom of the page. But when animating the message out or in the screen, the scrollbar shows up on the right-hand side, although I've set the position of the element to absolute. (It looks like this) Now I want to know how to prevent the scrollbar from showing up.

Here is my code: (I am using Angular 6)

Template: (.html)

 <div
        class="bar shadow-top"
        @slideInOutVertically
        *ngIf="show"
    >
        <div class="message">
            <ng-content></ng-content>
        </div>
    </div>

Styles: (.sass)

.bar
    height: 40px
    position: absolute
    bottom: 0
    right: 0
    left: 0
    background: var(--dy-bg-1)
    color: var(--dy-txt-1)
    display: flex
    .message
        margin: 0 auto
        align-self: center

Animation: (.ts)

export const slideInOutVertically = trigger('slideInOutVertically', [
    transition('void => *', [
        style({
            opacity: 0,
            transform: 'translateY(100%)'
        }),
        animate('0.2s ease-out')
    ]),
    transition('* => void', [
        animate('2s ease-in', style({ transform: 'translateY(100%)' }))
    ]),
]);