jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2026-09-02 21:04:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: replace overflow-y with scrollbar-gutter (#2849)

Browse Source 
The new scrollbar-gutter CSS property fixes the jump that appeared when the scrollbar was created/disposed

See https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/scrollbar-gutter

Signed-off-by: GitHub <noreply@github.com>
This commit is contained in:
Fernando Fernández
2026-07-24 03:00:30 +02:00
committed by GitHub
parent 868f22bf82
commit a7749ebd64
3 changed files with 3 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/index.html
+1 -1
View File
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en" class="no-forced-scrollbar">
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" type="image/x-icon" href="/favicon.ico">
packages/frontend/src/assets/styles/global.css
+1 -7
View File
@@ -1,16 +1,10 @@
* {
font-family: var(--j-font-family), sans-serif, system-ui !important;
backface-visibility: hidden;
}
html {
scrollbar-gutter: stable both-edges;
overscroll-behavior: none;
}
html.no-forced-scrollbar {
overflow-y: unset !important;
}
/* Custom utility classes */
.link {
packages/frontend/src/layouts/default.vue
+1 -7
View File
@@ -17,7 +17,7 @@
<script setup lang="ts">
import type { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
import { computed, onBeforeMount, onUnmounted, provide, ref, watch } from 'vue';
import { computed, provide, ref, watch } from 'vue';
import { useDisplay } from 'vuetify';
import type { DrawerItem } from '#/components/Layout/Navigation/NavigationDrawer.vue';
import { playbackManager } from '#/store/playback-manager.ts';
@@ -43,10 +43,4 @@ watch(display.mobile, () => {
});
provide('NavigationDrawer', navDrawer);
onBeforeMount(() => {
document.documentElement.classList.remove('no-forced-scrollbar');
});
onUnmounted(() => {
document.documentElement.classList.add('no-forced-scrollbar');
});
</script>