Webkit 滚动条适用于 Mac，但不适用于 Windows

Question

我使用 -webkit-scrollbar 设计了一个简单的自定义滚动条，它曾经可以工作，但有一天它在某些组件中停止工作（在我的 Windows 机器上）。滚动条在我的 SearchComponent 中按预期工作，但是当我转到 HomeComponent 时，它似乎不起作用。但当我必须在我的 Mac 上做一些工作时，我注意到它在每个组件中都可以工作。我很困惑为什么相同的代码在不同的机器上会有不同的工作方式。

-

HomeComponent.html

    <div class="container">
        <div class="scroll-box">
            <p>Upcoming Films</p>
            <div class="upcoming-films">
                <div class="upcoming-film" *ngFor="let film of upcomingFilmList; let i = index">
                    <app-upcoming-film-template
                        [upcomingFilm]="film"                      
                        class="upcoming-film-{{i}}"
                    ></app-upcoming-film-template>
                </div>
            </div>
        </div>
    </div>

HomeComponent.scss

//container for upcoming films
.scroll-box {
    position: absolute;
    right: 0;
    padding-right: 6.5px;
    height: 100%;
    width: 25%;
    overflow: hidden;
    border: .2vw solid #fff;
    border-radius: 5px;
    backdrop-filter: blur(3px);
}
//scrollbar
.upcoming-films ::-webkit-scrollbar {
    width: 0.5em;
}
.upcoming-films ::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 0.25em;
}

SearchComponent.html

    <div class="container">
        <div class="search-bar">
            <label class="prompt">What did you watch?</label>
            <input class="input-enter" type="text" [(ngModel)]="searchInput" name="searchInput" (keyup.enter)="onSearch()" (focus)="toggleSearchLabel()" required>
            <i (click)="toggleMoviesActive()" class="movies">Movies</i>
            <i (click)="toggleSeriesActive()" class="series">Series</i>
            <i (click)="toggleUsersActive()" class="users">Users</i>
            <a (click)="onSearch()">
                <i class='bx bx-search'></i>
            </a>
        </div>

        <div class="scroll-box">
            <div class="searched-films">
                <app-searched-film-template
                    *ngFor="let film of translatedMovies"
                    [filmDetails]="film" 
                    (click)="onFilmClicked(film.Type, film.imdbID)" 
                    class="searched-film"
                ></app-searched-film-template>
            </div>
        </div>
    </div>

搜索组件.scss

//container for searched films
.scroll-box {
    padding-right: 6.5px;
    margin-right: 6.5px;
    margin-left: 20px;
    width: auto;
    height: 94%;
    overflow: hidden;
    overflow-y: scroll;
    transition: .5s;
}
//contains all the searched films
.scroll-box.searched-films {
    overflow: hidden;
    overflow-y: scroll;
    scrollbar-color: #fff transparent;
    transition: .5s;
}
//scrollbar
.scroll-box::-webkit-scrollbar {
    width: 0.5em;
}
.scroll-box::-webkit-scrollbar-thumb {
    background: white;
    border-radius: 0.25em;
}

我总共有 5 个组件使用该滚动条，它只能在我的 Windows 计算机上的 SearchComponent 中工作，而不能在其他地方工作。在我的 Mac 上，所有 5 个组件都可以使用。

Answer 1

CSS 特异性：

检查 CSS 选择器的特殊性。在 HomeComponent.scss 中，选择器 .upcoming-films ::-webkit-scrollbar 可能会被另一种具有更高特异性的样式覆盖，该样式针对该特定组件中的滚动条。

尝试通过向 HomeComponent 特有的 .upcoming-films 元素添加一个附加类来提高 HomeComponent.scss 中选择器的特异性。例如：

SCSS
/* HomeComponent.scss */
.home .upcoming-films ::-webkit-scrollbar {
  width: 0.5em;
}

.home .upcoming-films ::-webkit-scrollbar-thumb {
  background: white;
  border-radius: 0.25em;
}