ionic-team / ionic-team/ionic-framework

bug: scrollToPoint resolves, but `ionScroll` events are fired after

未关闭
#23,509 0 条评论 0 个 reaction 已指派 0 人 在 GitHub 查看
package: core type: bug
主要语言
TypeScript
星标
52.7k
派生
13.3k
平均合并
1 天 15 小时
30 天内合并 PR
51

描述

# Bug Report

**Ionic version:**
[x] **5.x**

**Current behavior:**
When ion-content is scrolled using `scrollToPoint`, etc., even after finished waiting `scrollToPoint `(using await), the `ionScroll `event will be fired afterwards.

This is probably because the `ionScroll `event is issued by stencil's `readTask()`.
https://github.com/ionic-team/ionic-framework/blob/d5980354fa1672839fa7e89e8fc91cfa524e3f03/core/src/components/content/content.tsx#L169

**Expected behavior:**
If you await `scrollToPoint`, then the `ionScroll `event will not be fired after the await is completed.

I think this was done to avoid heavy processing by the `ionScroll `event, but I think the unintuitive timing/order of the event is a source of confusion.
Could you please consider the option of not firing the ionScroll event in the `readTask()`?

**Steps to reproduce:**
1. Open https://codepen.io/ugaya40/pen/abJeVBJ (from https://codepen.io/ionic/pen/wvwpbwV).
2. Push "AutoScroll !" Button.
3. View console.
![console](https://user-images.githubusercontent.com/1430166/123370425-aa233700-d5ba-11eb-8038-8153a8d93abf.png)
4. You can see that the scroll event handler is also executed after the display 'scrollFinished !!!'.

(If you have difficulty reproducing this phenomenon, you can use Chrome's CPU SlowDown feature to make it easier to reproduce.)

**Related code:**

I noticed this problem when I was trying to split the process depending on whether it was an auto-scroll or a manual-scroll.
As shown in the following code, it was inconvenient because it was distinguished as manual scrolling even though it was actually automatic scrolling.
https://codepen.io/ugaya40/pen/LYWwOvB

**Other information:**
Currently the only workaround currently seems to be to handle the scroll event of the element retrieved with `getScrollElement()`.

贡献指南

打开贡献指南

调研方向

Start with core/src/components/content/content.tsx at the linked readTask() location and reproduce the ordering with the provided CodePen example. Trace how scrollToPoint resolves relative to ionScroll dispatch, then verify that awaiting the scroll operation is followed by no later ionScroll event.

由索引模型根据 Issue 内容生成。

评估

技术栈
typescript
领域
frontend
Issue 类型
缺陷
难度
3/5
预计耗时
1-2 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。