Android端Chrome垂直滚动失效求助（Bootstrap5+Angular13）

问题描述 #

桌面端所有浏览器、Android端Firefox的侧边栏垂直滚动均正常，但Android端Chrome的垂直滚动功能完全失效。

相关代码 #

HTML代码 #

<nav class="sidenav shadow-right" id="sidenavAccordion" [ngClass]="sidenavStyle" data-cy="sideNav">
    <div class="sidenav-menu scrollable">
        <div class="nav">
            <ng-container *ngFor="let section of sideNavSections">
                <div class="sidenav-menu-heading" *ngIf="section.text">{{ section.text }}</div>
                <ng-container *ngFor="let item of section.items">
                    <sbpro-side-nav-item [sideNavItem]="sideNavItems[item]"></sbpro-side-nav-item>
                </ng-container>
            </ng-container>
        </div>
    </div>
    <div class="sidenav-footer">
        <div class="sidenav-footer-content" *ngIf="userService.user$ | async as user">
            <div class="sidenav-footer-subtitle">Logado como:</div>
            <div class="sidenav-footer-title">{{user.user.firstName}} {{user.user.lastName}}</div>
        </div>
    </div>
</nav>

SCSS代码 #

.sidenav {
    display: flex;
    flex-direction: column;
    height: 100%;
    flex-wrap: nowrap;
    font-size: 0.9rem;

    .sidenav-menu {
        flex-grow: 1;

        .nav {
            flex-direction: column;
            flex-wrap: nowrap;

            .sidenav-menu-heading {
                padding: 1.75rem 1rem 0.75rem;
                font-size: 0.7rem;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 0.05em;
            }

            .nav-link {
                display: flex;
                align-items: center;
                line-height: normal;
                padding-top: 0.75rem;
                padding-bottom: 0.75rem;
                position: relative;

                .nav-link-icon {
                    font-size: 0.9rem;
                    padding-right: 0.5rem;
                    display: inline-flex;

                    .feather {
                        width: 1rem;
                        height: 1rem;
                    }
                }

                &.active {
                    font-weight: 600;

                    .nav-icon {
                        color: $primary;
                    }
                }

                .sidenav-collapse-arrow {
                    display: inline-block;
                    margin-left: auto;
                    transition: transform 0.15s ease;
                }

                &.collapsed {
                    .sidenav-collapse-arrow {
                        transform: rotate(-90deg);
                    }
                }

                .badge {
                    padding: 0.125rem 0.25rem;
                }
            }

            .sidenav-menu-nested {
                flex-direction: column;
                margin-left: 2rem - $sidenav-nested-border-offest;
                border-left-style: solid;
                border-left-width: thin;
                padding-left: $sidenav-nested-border-offest;
            }
        }
    }
}

各端效果截图 #

• Android Chrome效果：
  
• Android Firefox效果：
  
• 桌面端效果：
  

解决方案 #

Android Chrome在flex容器内处理滚动元素时，容易因高度计算偏差导致滚动失效，可通过以下方式修复：

方案1：完善滚动容器的高度与滚动属性 #

修改.sidenav及.sidenav-menu的SCSS代码，明确滚动规则并修复flex高度计算bug：

.sidenav {
    display: flex;
    flex-direction: column;
    height: 100vh; /* 用100vh确保全屏高度，避免继承高度的不确定性 */
    flex-wrap: nowrap;
    font-size: 0.9rem;
    overflow: hidden; /* 防止父容器出现多余滚动条 */

    .sidenav-menu {
        flex-grow: 1;
        overflow-y: auto; /* 明确开启垂直滚动 */
        overflow-x: hidden; /* 隐藏水平滚动 */
        min-height: 0; /* 修复Android Chrome的flex子容器高度计算bug */
    }

    .sidenav-footer {
        flex-shrink: 0; /* 固定底部区域，不被滚动容器压缩 */
    }
}

方案2：添加触摸行为声明 #

Android Chrome的触摸事件可能干扰滚动，给滚动容器添加属性明确允许垂直滚动：

.scrollable {
    touch-action: pan-y;
    overflow-y: auto;
}

方案3：检查Angular样式作用域 #

如果Angular的视图封装导致滚动样式未生效，可将滚动相关样式移至全局样式文件，或使用::ng-deep强制穿透样式作用域（注意::ng-deep后续版本可能废弃，优先调整样式作用域）。

验证方式 #

修改后重新编译部署，在Android Chrome中测试：

• 确认侧边栏内容超出容器高度时可正常滚动
• 滚动过程无卡顿或失效情况

内容的提问来源于stack exchange，提问作者Herculano Cunha