usbharu
/
misskey
mirror of https://github.com/misskey-dev/misskey.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix MkPullToRefresh behaviour (#15944) 

* Update MkPullToRefresh.vue

* Update MkPullToRefresh.vue

* Update MkPullToRefresh.vue
This commit is contained in:
syuilo 2025-05-04 18:51:30 +09:00 committed by GitHub
parent 3bdb1dd558
commit 14d6734cb1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 33 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
packages/frontend/src/components/MkPullToRefresh.vue
View File

@ -76,8 +76,8 @@ function unlockDownScroll() {
scrollEl.style.overscrollBehavior = 'contain'; scrollEl.style.overscrollBehavior = 'contain';
} }
function moveStart(event: PointerEvent) { function moveStartByMouse(event: MouseEvent) {
if (event.pointerType === 'mouse' && event.button !== 1) return; if (event.button !== 1) return;
if (isRefreshing.value) return; if (isRefreshing.value) return;
const scrollPos = scrollEl!.scrollTop; const scrollPos = scrollEl!.scrollTop;
@ -88,27 +88,39 @@ function moveStart(event: PointerEvent) {
lockDownScroll(); lockDownScroll();
// マウスでのpull時、画面上のテキスト選択が発生したり、ブラウザの中クリックによる挙動が競合したりして画面がスクロールされたりするのを防ぐ event.preventDefault(); // 中クリックによるスクロール、テキスト選択などを防ぐ
window.document.body.setAttribute('inert', 'true');
isPulling.value = true; isPulling.value = true;
startScreenY = getScreenY(event); startScreenY = getScreenY(event);
pullDistance.value = 0; pullDistance.value = 0;
// タッチデバイスでPointerEventを使うとなんか挙動がおかしいので、TouchEventとMouseEventを使い分ける window.addEventListener('mousemove', moving, { passive: true });
if (event.pointerType === 'mouse') { window.addEventListener('mouseup', () => {
window.addEventListener('mousemove', moving, { passive: true }); window.removeEventListener('mousemove', moving);
window.addEventListener('mouseup', () => { onPullRelease();
window.removeEventListener('mousemove', moving); }, { passive: true, once: true });
onPullRelease(); }
}, { passive: true, once: true });
} else { function moveStartByTouch(event: TouchEvent) {
window.addEventListener('touchmove', moving, { passive: true }); if (isRefreshing.value) return;
window.addEventListener('touchend', () => {
window.removeEventListener('touchmove', moving); const scrollPos = scrollEl!.scrollTop;
onPullRelease(); if (scrollPos !== 0) {
}, { passive: true, once: true }); unlockDownScroll();
return;
} }
lockDownScroll();
isPulling.value = true;
startScreenY = getScreenY(event);
pullDistance.value = 0;
window.addEventListener('touchmove', moving, { passive: true });
window.addEventListener('touchend', () => {
window.removeEventListener('touchmove', moving);
onPullRelease();
}, { passive: true, once: true });
} }
function moveBySystem(to: number): Promise<void> { function moveBySystem(to: number): Promise<void> {
@ -148,7 +160,6 @@ async function closeContent() {
} }
function onPullRelease() { function onPullRelease() {
window.document.body.removeAttribute('inert');
startScreenY = null; startScreenY = null;
if (isPulledEnough.value) { if (isPulledEnough.value) {
isPulledEnough.value = false; isPulledEnough.value = false;
@ -208,13 +219,15 @@ onMounted(() => {
if (rootEl.value == null) return; if (rootEl.value == null) return;
scrollEl = getScrollContainer(rootEl.value); scrollEl = getScrollContainer(rootEl.value);
lockDownScroll(); lockDownScroll();
rootEl.value.addEventListener('pointerdown', moveStart, { passive: true }); rootEl.value.addEventListener('mousedown', moveStartByMouse, { passive: false }); // preventDefaultするため
rootEl.value.addEventListener('touchstart', moveStartByTouch, { passive: true });
rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true }); rootEl.value.addEventListener('touchend', toggleScrollLockOnTouchEnd, { passive: true });
}); });
onUnmounted(() => { onUnmounted(() => {
unlockDownScroll(); unlockDownScroll();
if (rootEl.value) rootEl.value.removeEventListener('pointerdown', moveStart); if (rootEl.value) rootEl.value.removeEventListener('mousedown', moveStartByMouse);
if (rootEl.value) rootEl.value.removeEventListener('touchstart', moveStartByTouch);
if (rootEl.value) rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd); if (rootEl.value) rootEl.value.removeEventListener('touchend', toggleScrollLockOnTouchEnd);
}); });
</script> </script>