refactor: チャットルームをComposition API化 (#8850)

* pick form

* pick message

* pick room

* fix lint

* fix scroll?

* fix scroll.ts

* fix directives/sticky-container

* update global/sticky-container.vue

* fix, 🎨

* test.1
This commit is contained in:
tamaina
2022-06-20 13:20:28 +09:00
committed by GitHub
parent b70473ed60
commit 30a39a296d
7 changed files with 585 additions and 661 deletions

View File

@@ -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 => {