-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathscrollLockFix.ts
More file actions
38 lines (36 loc) · 1.27 KB
/
scrollLockFix.ts
File metadata and controls
38 lines (36 loc) · 1.27 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import { CSS_CAN_SCROLL } from "./consts";
const scrollLock = (event: Event) => {
const element = event.target as HTMLElement;
if (element === null) {
return;
}
// 以下の手順で発生するスクロールのバグ対策。回避するため1pxだけスクロール量を減らす
// 1. メニューを上下どちらかに最大までスクロールする
// 2. 更にスクロールを行うとページ全体がスクロールする
if (element.scrollTop + element.clientHeight === element.scrollHeight) {
element.scrollTop = element.scrollTop - 1;
}
if (element.scrollTop === 0) {
element.scrollTop = 1;
}
};
/**
* スクロールのバグ対策を行うイベントを追加します。
*/
export const scrollLockFix = (element: HTMLElement) => {
const canScrollElement = element.querySelector(`.${CSS_CAN_SCROLL}`);
if (!canScrollElement) {
return;
}
canScrollElement.addEventListener("scroll", scrollLock);
};
/**
* スクロールのバグ対策を行うイベントを削除します。
*/
export const scrollLockFixRemove = (element: HTMLElement) => {
const canScrollElement = element.querySelector(`.${CSS_CAN_SCROLL}`);
if (!canScrollElement) {
return;
}
canScrollElement.removeEventListener("scroll", scrollLock);
};