html - 当位置绝对对象移出屏幕时，CSS 隐藏滚动条(在 Angular 6 中)

Question

我有一条消息显示在页面底部。但是当消息在屏幕外或屏幕中显示动画时，滚动条显示在右侧，尽管我已将元素的位置设置为 absolute。 (看起来像 this )现在我想知道如何防止滚动条出现。

这是我的代码:(我使用的是 Angular 6)

模板:(.html)

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

样式:(.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

动画:(.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%)' }))
    ]),
]);

Answer 1

代替 position: absolute 使用 position: fixed