From 30a39a296dcea701deb1cf5ac323aa1e6bcee13f Mon Sep 17 00:00:00 2001 From: tamaina Date: Mon, 20 Jun 2022 13:20:28 +0900 Subject: refactor: チャットルームをComposition API化 (#8850) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * pick form * pick message * pick room * fix lint * fix scroll? * fix scroll.ts * fix directives/sticky-container * update global/sticky-container.vue * fix, :art: * test.1 --- packages/client/src/scripts/scroll.ts | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) (limited to 'packages/client/src/scripts/scroll.ts') diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts index 621fe88105..0643bad2fb 100644 --- a/packages/client/src/scripts/scroll.ts +++ b/packages/client/src/scripts/scroll.ts @@ -1,9 +1,13 @@ type ScrollBehavior = 'auto' | 'smooth' | 'instant'; -export function getScrollContainer(el: Element | null): Element | null { - if (el == null || el.tagName === 'BODY') return null; +export function getScrollContainer(el: HTMLElement | null): HTMLElement | null { + if (el == null || el.tagName === 'HTML') return null; const overflow = window.getComputedStyle(el).getPropertyValue('overflow'); - if (overflow.endsWith('auto')) { // xとyを個別に指定している場合、hidden auto みたいな値になる + if ( + // xとyを個別に指定している場合、`hidden scroll`みたいな値になる + overflow.endsWith('scroll') || + overflow.endsWith('auto') + ) { return el; } else { return getScrollContainer(el.parentElement); @@ -22,6 +26,11 @@ export function isTopVisible(el: Element | null): boolean { return scrollTop <= topPosition; } +export function isBottomVisible(el: HTMLElement, tolerance = 1, container = getScrollContainer(el)) { + if (container) return el.scrollHeight <= container.clientHeight + Math.abs(container.scrollTop) + tolerance; + return el.scrollHeight <= window.innerHeight + window.scrollY + tolerance; +} + export function onScrollTop(el: Element, cb) { const container = getScrollContainer(el) || window; const onScroll = ev => { -- cgit v1.2.3-freya From 7775eb964159c0bf808462c405779029e28dc6f5 Mon Sep 17 00:00:00 2001 From: Johann150 Date: Wed, 6 Jul 2022 19:02:39 +0200 Subject: refactor: use overflow-y to determine scroll container By using `overflow-y` instead of `overflow` using `endsWith` can be avoided and represents the data we are actually interested in here more accurately. --- packages/client/src/scripts/scroll.ts | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) (limited to 'packages/client/src/scripts/scroll.ts') diff --git a/packages/client/src/scripts/scroll.ts b/packages/client/src/scripts/scroll.ts index 0643bad2fb..f5bc6bf9ce 100644 --- a/packages/client/src/scripts/scroll.ts +++ b/packages/client/src/scripts/scroll.ts @@ -2,12 +2,8 @@ type ScrollBehavior = 'auto' | 'smooth' | 'instant'; export function getScrollContainer(el: HTMLElement | null): HTMLElement | null { if (el == null || el.tagName === 'HTML') return null; - const overflow = window.getComputedStyle(el).getPropertyValue('overflow'); - if ( - // xとyを個別に指定している場合、`hidden scroll`みたいな値になる - overflow.endsWith('scroll') || - overflow.endsWith('auto') - ) { + const overflow = window.getComputedStyle(el).getPropertyValue('overflow-y'); + if (overflow === 'scroll' || overflow === 'auto') { return el; } else { return getScrollContainer(el.parentElement); -- cgit v1.2.3-freya