当位置绝对对象移出屏幕时CSS隐藏滚动条（在Angular 6中）答案

【问题标题】：CSS Hide Scrollbar when Position Absolute Object Moves out of Screen (in Angular 6)当位置绝对对象移出屏幕时CSS隐藏滚动条（在Angular 6中）
【发布时间】：2019-01-08 02:47:42
【问题描述】：

我有一条消息显示在页面底部。但是在将消息设置为动画时或在屏幕中时，滚动条会显示在右侧，尽管我已将元素的位置设置为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%)' }))
    ]),
]);

【问题讨论】：

标签： html css angular typescript animation

【解决方案1】：

用position: fixed代替position: absolute

【讨论】：