javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-10 00:27:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(datetime): prevent vertical page scroll on interaction (#23780)

Browse Source 
resolves #23554
This commit is contained in:
William Martin
2021-08-26 09:18:51 -04:00
committed by GitHub
parent 3d1ae0305d
commit 950350a948
1 changed files with 22 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
core/src/components/datetime/datetime.tsx
View File

@ -725,7 +725,7 @@ export class Datetime implements ComponentInterface {
year
});
workingMonth.scrollIntoView(false);
calendarBodyRef.scrollLeft = workingMonth.clientWidth;
calendarBodyRef.style.removeProperty('overflow');
calendarBodyRef.style.removeProperty('pointer-events');
@ -967,11 +967,11 @@ export class Datetime implements ComponentInterface {
const yearEl = yearRef.querySelector(`.picker-col-item[data-value='${workingYear}']`);
if (monthEl) {
monthEl.scrollIntoView({ block: 'center', inline: 'center' });
this.centerPickerItemInView(monthEl as HTMLElement, monthRef, 'auto');
}
if (yearEl) {
yearEl.scrollIntoView({ block: 'center', inline: 'center' });
this.centerPickerItemInView(yearEl as HTMLElement, yearRef, 'auto');
}
});
}, 250);
@ -1146,10 +1146,10 @@ export class Datetime implements ComponentInterface {
const nextMonth = calendarBodyRef.querySelector('.calendar-month:last-of-type');
if (!nextMonth) { return; }
nextMonth.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest'
calendarBodyRef.scrollTo({
top: 0,
left: (nextMonth as HTMLElement).offsetWidth * 2,
behavior: 'smooth'
});
}
@ -1160,10 +1160,10 @@ export class Datetime implements ComponentInterface {
const prevMonth = calendarBodyRef.querySelector('.calendar-month:first-of-type');
if (!prevMonth) { return; }
prevMonth.scrollIntoView({
behavior: 'smooth',
block: 'end',
inline: 'nearest'
calendarBodyRef.scrollTo({
top: 0,
left: 0,
behavior: 'smooth'
});
}
@ -1226,6 +1226,15 @@ export class Datetime implements ComponentInterface {
})
}
private centerPickerItemInView(target: HTMLElement, container: HTMLElement, behavior: ScrollBehavior = 'smooth') {
container.scroll({
// (Vertical offset from parent) - (three empty picker rows) + (half the height of the target to ensure the scroll triggers)
top: target.offsetTop - (3 * target.clientHeight) + (target.clientHeight / 2),
left: 0,
behavior
});
}
private renderiOSYearView(calendarYears: number[] = []) {
return [
<div class="datetime-picker-before"></div>,
@ -1240,10 +1249,7 @@ export class Datetime implements ComponentInterface {
<div
class="picker-col-item"
data-value={month.value}
onClick={(ev: Event) => {
const target = ev.target as HTMLElement;
target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
}}
onClick={(ev: Event) => this.centerPickerItemInView(ev.target as HTMLElement, this.monthRef as HTMLElement)}
>{month.text}</div>
)
})}
@ -1260,10 +1266,7 @@ export class Datetime implements ComponentInterface {
<div
class="picker-col-item"
data-value={year}
onClick={(ev: Event) => {
const target = ev.target as HTMLElement;
target.scrollIntoView({ block: 'center', inline: 'center', behavior: 'smooth' });
}}
onClick={(ev: Event) => this.centerPickerItemInView(ev.target as HTMLElement, this.yearRef as HTMLElement)}
>{year}</div>
)
})}