javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 04:14:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(item-sliding): prevent scrolling during slide gesture (#23774)

Browse Source 
resolves #19564
This commit is contained in:
William Martin
2021-08-17 23:53:16 -04:00
committed by GitHub
parent 621f4faa1a
commit e0c4ad30be
2 changed files with 24 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/item-option/item-option.tsx
View File

@ -104,7 +104,7 @@ export class ItemOption implements ComponentInterface, AnchorInterface, ButtonIn
[mode]: true, [mode]: true,
'item-option-disabled': disabled, 'item-option-disabled': disabled,
'item-option-expandable': expandable, 'item-option-expandable': expandable,
'ion-activatable': true, 'ion-activatable': true
})} })}
> >
<TagType <TagType

23
core/src/components/item-sliding/item-sliding.tsx
View File

@ -43,6 +43,8 @@ export class ItemSliding implements ComponentInterface {
private rightOptions?: HTMLIonItemOptionsElement; private rightOptions?: HTMLIonItemOptionsElement;
private optsDirty = true; private optsDirty = true;
private gesture?: Gesture; private gesture?: Gesture;
private closestContent: HTMLIonContentElement | null = null;
private initialContentScrollY = true;
@Element() el!: HTMLIonItemSlidingElement; @Element() el!: HTMLIonItemSlidingElement;
@ -66,6 +68,8 @@ export class ItemSliding implements ComponentInterface {
async connectedCallback() { async connectedCallback() {
this.item = this.el.querySelector('ion-item'); this.item = this.el.querySelector('ion-item');
this.closestContent = this.el.closest('ion-content');
await this.updateOptions(); await this.updateOptions();
this.gesture = (await import('../../utils/gesture')).createGesture({ this.gesture = (await import('../../utils/gesture')).createGesture({
@ -252,7 +256,23 @@ export class ItemSliding implements ComponentInterface {
return !!(this.rightOptions || this.leftOptions); return !!(this.rightOptions || this.leftOptions);
} }
private disableContentScrollY() {
if (this.closestContent === null) { return }
this.initialContentScrollY = this.closestContent.scrollY;
this.closestContent.scrollY = false;
}
private restoreContentScrollY() {
if (this.closestContent === null) { return }
this.closestContent.scrollY = this.initialContentScrollY;
}
private onStart() { private onStart() {
// Prevent scrolling during gesture
this.disableContentScrollY();
openSlidingItem = this.el; openSlidingItem = this.el;
if (this.tmr !== undefined) { if (this.tmr !== undefined) {
@ -297,6 +317,9 @@ export class ItemSliding implements ComponentInterface {
} }
private onEnd(gesture: GestureDetail) { private onEnd(gesture: GestureDetail) {
// Restore ion-content scrollY to initial value when gesture ends
this.restoreContentScrollY();
const velocity = gesture.velocityX; const velocity = gesture.velocityX;
let restingPoint = (this.openAmount > 0) let restingPoint = (this.openAmount > 0)