垫筹码滚动问题

Question

我正在处理芯片，在设置水平滚动以垫芯片后，我发现了这个问题 如果您在向下滚动后单击垫子上的任何位置，它将自动向上滚动到顶部。 在 stackblitz 上测试垫芯片的原始代码后，我发现垫芯片具有此功能，但默认设置。我需要防止这种情况发生。

这是我的 HTML 代码

> <div class="callTags robotoRegular">
    <div class="wrapper">
        <div class="box">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.categories.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList1 >
                        <div class="selectedTags" id="catScroll">
                            <mat-chip
                                *ngFor="let category of selectedCategories"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(category, 'category')">
                                <span >
                                    {{category.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #fruitInput
                            class="robotoRegular"
                            [formControl]="categoriesForm"
                            [matAutocomplete]="auto1"
                            [matChipInputFor]="chipList1"
                            (ngModelChange)="change($event, 'category')"
                            placeholder="Select Category"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'category')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('category')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto1="matAutocomplete">
                        <mat-option  *ngFor="let category of filteredCategories; let i = index"  [value]="category.Name" (click)="selected(category, 'category')">
                               <div>{{category.Name}}</div>
                        </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedCategories.length}}</span>
                </div>
            </div>
        </div>
        <!-- subCategories -->
        <div class="box subCategories">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.subCategories.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList2 aria-label="Fruit selection">
                        <div class="selectedTags wrapups" id='scrol'>
                            <mat-chip
                                *ngFor="let subCat of selectedWrapUps"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(subCat, 'wrapup')">
                                <span class="
                                ">
                                    {{subCat.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #categoryInput
                            class="robotoRegular"
                            [formControl]="subcategoriesForm"
                            [matAutocomplete]="auto2"
                            [matChipInputFor]="chipList2"
                            placeholder="Select Wrapup"
                            (ngModelChange)="change($event, 'wrapup')"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'wrapup')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('wrapup')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto2="matAutocomplete">
                      <mat-option *ngFor="let subCategory of filteredWrapUps" [value]="subCategory.Name" (click) = "selected(subCategory, 'wrapup')">
                        {{subCategory.Name}}
                      </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedWrapUps.length}}</span>
                </div>
            </div>
        </div>
        <div class="box tagsBox">
            <div class="boxWrapper">
                <div class="title">
                    <span class="boxTitle">{{ 'multiWrapupTags.tags.title' | translate}}</span>
                </div>
                <mat-form-field  appearance="none" class="example-chip-list">
                    <mat-chip-list #chipList3 aria-label="Fruit selection">
                        <div class="selectedTags">
                            <mat-chip
                                *ngFor="let tag of selectedTags"
                                [selectable]="selectable"
                                [removable]="removable"
                                (removed)="remove(tag, 'tags')">
                                <span class="
                                ">
                                    {{tag.Name}}
                                </span>
                                <mat-icon matChipRemove *ngIf="removable">cancel</mat-icon>
                            </mat-chip>
                            <input
                            #fruitInput
                            class="robotoRegular"
                            [formControl]="tagsForm"
                            [matAutocomplete]="auto3"
                            [matChipInputFor]="chipList3"
                            placeholder="Select Tag"
                            (ngModelChange)="change($event, 'tags')"
                            [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
                            (matChipInputTokenEnd)="add($event, 'tags')">
                        </div>
                        <div class="d-flex">
                            <div class="d-flex flex-column ">
                                <button id="up"><span class="material-icons"> keyboard_arrow_up </span></button>
                                <button id="down"><span class="material-icons"> keyboard_arrow_down </span></button>
                            </div>
                            <button mat-button (click)="deleteAll('tags')">Clear</button>
                        </div>
                    </mat-chip-list>
                    <mat-autocomplete #auto3="matAutocomplete">
                      <mat-option *ngFor="let tag of filteredTags" [value]="tag.Name" (click)="selected(tag, 'tags')">
                        {{tag.Name}}
                      </mat-option>
                    </mat-autocomplete>
                </mat-form-field>
                <div class="count">
                    <span >{{selectedTags.length}}</span>
                </div>
            </div>
        </div>
        <button mat-stroked-button (click)="onCallEnded()" aria-label="Show an example snack-bar">
           Success Notification
        </button>
    </div>
</div>

Answer 1

使用dom对象窗口：

window.scrollX：返回文档水平位移的像素数。

window.scrollY：返回使用垂直滚动在文档中滚动的像素数。

window.scroll(x-coord,y-coord)：将窗口移动到文档中的特定位置。 x-coord 是要在左上角显示的像素的文档水平轴上的坐标。 y-coord 是要显示在左上角的像素在文档纵轴上的坐标。

Answer 2

我不知道这是否已解决，但由于我必须处理这个问题（我的垫芯片列表是水平的，在单行中，带有滚动条）我发布了我想出的解决方案。

首先，发生的事情是垫片列表的预期行为：当它获得焦点时，滚动将返回到第一个垫片列表。

这是你可以做的：

1- 将包含 mat 芯片列表的 mat 表单字段包装在一个新 div 中，其样式将具有 'overflow-x:scroll'

此时您会看到滚动工作正常，但输入的大小仍然是初始值，因此输入可能无法执行我们希望它执行的操作（移除芯片、拖放等）。如果发生这种情况，解决方案是动态更改垫芯片列表的宽度：

2- 在 mat 表单字段中，将其样式宽度绑定到打字稿中的数字变量。由于我正在使用 Angular 9，我的看起来像这样（有使用 ngStyle 的版本）：

3- 每次添加或删除筹码时，您都需要在每次添加或删除筹码时更新垫子筹码列表的宽度（检查可用的事件）。您可以遵循不同的策略，在我的情况下，我根据芯片文本的像素大小来计算宽度，我使用了这个解决方案：https://stackoverflow.com/a/58705317/11904701