58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
|
/**
|
||
|
|
* 要素をスクロールに追従させる
|
||
|
|
*/
|
||
|
|
export default class ScrollFollower {
|
||
|
|
private follower: Element;
|
||
|
|
private containerTop: number;
|
||
|
|
private topPadding: number;
|
||
|
|
|
||
|
|
constructor(follower: Element, topPadding: number) {
|
||
|
|
//#region
|
||
|
|
this.follow = this.follow.bind(this);
|
||
|
|
//#endregion
|
||
|
|
|
||
|
|
this.follower = follower;
|
||
|
|
this.containerTop = follower.getBoundingClientRect().top;
|
||
|
|
this.topPadding = topPadding;
|
||
|
|
|
||
|
|
window.addEventListener('scroll', this.follow);
|
||
|
|
window.addEventListener('resize', this.follow);
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 追従解除
|
||
|
|
*/
|
||
|
|
public dispose() {
|
||
|
|
window.removeEventListener('scroll', this.follow);
|
||
|
|
window.removeEventListener('resize', this.follow);
|
||
|
|
}
|
||
|
|
|
||
|
|
private follow() {
|
||
|
|
const windowBottom = window.scrollY + window.innerHeight;
|
||
|
|
const windowTop = window.scrollY + this.topPadding;
|
||
|
|
|
||
|
|
const rect = this.follower.getBoundingClientRect();
|
||
|
|
//const followerHeight = rect.height + this.containerTop;
|
||
|
|
const followerBottom = (rect.top + window.scrollY) + rect.height;
|
||
|
|
|
||
|
|
// スクロールの上部(+余白)がフォロワーコンテナの上部よりも上方にある
|
||
|
|
if (window.scrollY + this.topPadding < this.containerTop) {
|
||
|
|
// フォロワーをコンテナの最上部に合わせる
|
||
|
|
(this.follower.parentNode as any).style.marginTop = '0px';
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// スクロールの下部がフォロワーの下部よりも下方にある かつ 表示領域の縦幅がフォロワーの縦幅よりも狭い
|
||
|
|
if (windowBottom > followerBottom && rect.height > (window.innerHeight - this.topPadding)) {
|
||
|
|
// フォロワーの下部をスクロール下部に合わせる
|
||
|
|
const top = (windowBottom - rect.height) - this.containerTop;
|
||
|
|
(this.follower.parentNode as any).style.marginTop = `${top}px`;
|
||
|
|
// スクロールの上部(+余白)がフォロワーの上部よりも上方にある または 表示領域の縦幅がフォロワーの縦幅よりも広い
|
||
|
|
} else if ((windowTop < rect.top + window.scrollY || rect.height < (window.innerHeight - this.topPadding))) {
|
||
|
|
// フォロワーの上部をスクロール上部(+余白)に合わせる
|
||
|
|
const top = windowTop - this.containerTop;
|
||
|
|
(this.follower.parentNode as any).style.marginTop = `${top}px`;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|