[英]Angular cdk-virtual-scroll-viewport: scroll up is not working
I have created simple virtual scroll with 5000 elements.我创建了包含 5000 个元素的简单虚拟滚动。
But when you are scrolling up via mousewheel - elements are stopping and not scrolling at all但是当您通过鼠标滚轮向上滚动时 - 元素停止并且根本不滚动
expected behaviour: scrolling should work smoothly预期行为:滚动应该可以顺利进行
any thoughts?有什么想法吗?
DEMO: https://stackblitz.com/edit/angular-h4xptu-r24hpq?file=app%2Fselect-reset-example.ts,app%2Fselect-reset-example.html演示: https ://stackblitz.com/edit/angular-h4xptu-r24hpq?file=app%2Fselect-reset-example.ts,app%2Fselect-reset-example.html
<mat-form-field>
<mat-select
[formControl]="form"
placeholder="State"
class="virtual-scroll"
(openedChange)="scrollViewport.scrollToIndex(states.indexOf(form?.value || 0))"
>
<cdk-virtual-scroll-viewport
[itemSize]="48"
[style.height.px]="6*48"
minBufferPx="288"
maxBufferPx="288"
#scrollViewport
>
<mat-option *cdkVirtualFor="let state of states" [value]="state">
{{state}}
</mat-option>
</cdk-virtual-scroll-viewport>
</mat-select>
</mat-form-field>
UPDATE:更新:
I have changed css a little bit:我对 css 做了一点改动:
.cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper {
min-width: unset !important;
}
mat-option {
width: 100px !important;
background-color: red;
}
Now mat option is taking off half of the container and on the right side scroll is working as expected现在 mat 选项正在取出容器的一半,右侧滚动按预期工作
but Why when you scrolling over mat-options it is lagging?但是为什么当你滚动 mat-options 时它会滞后?
I was able to resolve it with the tricky fix:我能够通过棘手的修复来解决它:
Scroll is working fine on the parent but not on Mat-option滚动在父级上运行良好,但在 Mat-option 上却不行
So, I am removing MouseEvents on mat-option via adding pointer-events: none;
因此,我通过添加
pointer-events: none;
while the user is scrolling on parent element.当用户在父元素上滚动时。
When the user ended to scroll I am removing this property.当用户结束滚动时,我将删除此属性。
We need to add mousewheel
on parent <cdk-virtual-scroll-viewport>
: to enable/disable scrolling, it is not working directly on mat-option: once you disabled this - you cant enable back我们需要在父
<cdk-virtual-scroll-viewport>
上添加mousewheel
:启用/禁用滚动,它不能直接在 mat-option 上工作:一旦你禁用它 - 你不能启用回来
via SetTimemout
I am closing scrolling in 20miliseconds通过
SetTimemout
我将在 20 毫秒内关闭滚动
<cdk-virtual-scroll-viewport
itemSize="48"
appendOnly
[style.height.px]="6*48"
#scrollViewport
(mousewheel)="mouseWheelEvent($event)" // <=== scroll event
>
<mat-option
[class.disable-events]="addClass$ | async" // <==== class will be added in case scrolling, and removed if scrolling ended
*cdkVirtualFor="let state of states"
[value]="state"
>
{{state}}
</mat-option>
</cdk-virtual-scroll-viewport>
mouseWheelEvent(e) {
clearTimeout(this.timer);
this.timer = setTimeout(() => this.addClass$.next(false), 20);
this.addClass$.next(true);
}
.disable-events {
pointer-events: none;
}
DEMO: https://stackblitz.com/edit/angular-h4xptu-7oy9es?file=app/select-reset-example.ts演示: https ://stackblitz.com/edit/angular-h4xptu-7oy9es?file=app/select-reset-example.ts
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.