我当时正在研究芯片，并且在设置水平滚动以匹配芯片后发现了这个问题 如果向下滚动后单击垫子芯片上的任何位置，它将自动向上滑动。 在stackblitz上测试了mat芯片的原始代码后，我发现mat芯片具有这种功能，但是默认。我需要防止这种情况的发生。
这是我的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>
答案 0 :(得分：0)
使用dom对象窗口：
window.scrollX：返回水平移动文档的像素数。
window.scrollY：返回使用垂直滚动在文档中滚动的像素数。
window.scroll（x-coord，y-coord）：将窗口移动到文档中的特定位置。 x坐标是要在左上方显示的像素文档的水平轴上的坐标。 y坐标是要在左上方显示的像素文档的垂直轴上的坐标。
答案 1 :(得分：0)
我不知道这是否已解决，但由于我不得不处理这个问题（我的垫子芯片列表是水平的，在一行中，带有滚动条）我发布了我想出的解决方案。
>首先，发生的事情是，这是垫子芯片列表的预期行为：当它获得焦点时，滚动将返回到第一个垫子芯片列表。
这是你可以做的：
1- 将包含 mat 芯片列表的 mat 表单字段包装在一个新的 div 中，该样式将具有 'overflow-x: scroll'
此时您将看到滚动工作正常，但输入的大小仍然是初始大小，因此输入可能无法执行我们想要的操作（移除芯片、拖放等）。如果发生这种情况，解决方案是动态更改垫子芯片列表的宽度：
2- 在 mat 表单字段中，将其样式宽度绑定到打字稿中的数字变量。因为我使用的是 Angular 9，所以我的看起来像这样（有使用 ngStyle 的版本）：
3- 每次添加或删除筹码时，每次添加或删除筹码时都需要更新垫子筹码列表的宽度（检查可用的事件）。您可以遵循不同的策略，在我的情况下，我根据芯片文本的像素大小计算宽度，我使用了以下解决方案：https://stackoverflow.com/a/58705317/11904701