diff --git a/packages/frontend-shared/js/const.ts b/packages/frontend-shared/js/const.ts index 9e20479e26..9b821e650a 100644 --- a/packages/frontend-shared/js/const.ts +++ b/packages/frontend-shared/js/const.ts @@ -109,12 +109,6 @@ export const ROLE_POLICIES = [ 'canImportUserLists', ] as const; -// なんか動かない -//export const CURRENT_STICKY_TOP = Symbol('CURRENT_STICKY_TOP'); -//export const CURRENT_STICKY_BOTTOM = Symbol('CURRENT_STICKY_BOTTOM'); -export const CURRENT_STICKY_TOP = 'CURRENT_STICKY_TOP'; -export const CURRENT_STICKY_BOTTOM = 'CURRENT_STICKY_BOTTOM'; - export const DEFAULT_SERVER_ERROR_IMAGE_URL = 'https://xn--931a.moe/assets/error.jpg'; export const DEFAULT_NOT_FOUND_IMAGE_URL = 'https://xn--931a.moe/assets/not-found.jpg'; export const DEFAULT_INFO_IMAGE_URL = 'https://xn--931a.moe/assets/info.jpg'; diff --git a/packages/frontend/src/components/global/MkStickyContainer.vue b/packages/frontend/src/components/global/MkStickyContainer.vue index 7dda4b2f8a..05245716c2 100644 --- a/packages/frontend/src/components/global/MkStickyContainer.vue +++ b/packages/frontend/src/components/global/MkStickyContainer.vue @@ -23,8 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { onMounted, onUnmounted, provide, inject, ref, watch, useTemplateRef } from 'vue'; -import { CURRENT_STICKY_BOTTOM, CURRENT_STICKY_TOP } from '@@/js/const.js'; -import type { Ref } from 'vue'; +import { DI } from '@/di.js'; const rootEl = useTemplateRef('rootEl'); const headerEl = useTemplateRef('headerEl'); @@ -32,13 +31,13 @@ const footerEl = useTemplateRef('footerEl'); const headerHeight = ref<string | undefined>(); const childStickyTop = ref(0); -const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0)); -provide(CURRENT_STICKY_TOP, childStickyTop); +const parentStickyTop = inject(DI.currentStickyTop, ref(0)); +provide(DI.currentStickyTop, childStickyTop); const footerHeight = ref<string | undefined>(); const childStickyBottom = ref(0); -const parentStickyBottom = inject<Ref<number>>(CURRENT_STICKY_BOTTOM, ref(0)); -provide(CURRENT_STICKY_BOTTOM, childStickyBottom); +const parentStickyBottom = inject(DI.currentStickyBottom, ref(0)); +provide(DI.currentStickyBottom, childStickyBottom); const calc = () => { // コンポーネントが表示されてないけどKeepAliveで残ってる場合などは null になる diff --git a/packages/frontend/src/di.ts b/packages/frontend/src/di.ts index 4977cdbd62..f9fc282315 100644 --- a/packages/frontend/src/di.ts +++ b/packages/frontend/src/di.ts @@ -12,4 +12,6 @@ export const DI = { mock: Symbol() as InjectionKey<boolean>, pageMetadata: Symbol() as InjectionKey<Ref<Record<string, any>>>, viewId: Symbol() as InjectionKey<string>, + currentStickyTop: Symbol() as InjectionKey<Ref<number>>, + currentStickyBottom: Symbol() as InjectionKey<Ref<number>>, }; diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss index d2ce839574..8c5617b72e 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -179,14 +179,14 @@ rt { ._pageScrollable { height: 100%; - overflow: auto; + overflow: clip; overflow-y: scroll; overscroll-behavior: contain; } ._pageScrollableReversed { height: 100%; - overflow: auto; + overflow: clip; overflow-y: scroll; overscroll-behavior: contain; display: flex; diff --git a/packages/frontend/src/ui/universal.vue b/packages/frontend/src/ui/universal.vue index 2742b4cd98..c7dcf746c4 100644 --- a/packages/frontend/src/ui/universal.vue +++ b/packages/frontend/src/ui/universal.vue @@ -97,7 +97,6 @@ SPDX-License-Identifier: AGPL-3.0-only <script lang="ts" setup> import { defineAsyncComponent, provide, onMounted, computed, ref, watch, useTemplateRef } from 'vue'; import { instanceName } from '@@/js/config.js'; -import { CURRENT_STICKY_BOTTOM } from '@@/js/const.js'; import { isLink } from '@@/js/is-link.js'; import XCommon from './_common_/common.vue'; import type { Ref } from 'vue'; @@ -200,16 +199,13 @@ const onContextmenu = (ev) => { }; const navFooterHeight = ref(0); -provide<Ref<number>>(CURRENT_STICKY_BOTTOM, navFooterHeight); watch(navFooter, () => { if (navFooter.value) { navFooterHeight.value = navFooter.value.offsetHeight; - window.document.body.style.setProperty('--MI-stickyBottom', `${navFooterHeight.value}px`); window.document.body.style.setProperty('--MI-minBottomSpacing', 'var(--MI-minBottomSpacingMobile)'); } else { navFooterHeight.value = 0; - window.document.body.style.setProperty('--MI-stickyBottom', '0px'); window.document.body.style.setProperty('--MI-minBottomSpacing', '0px'); } }, {