GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 23:56:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: 添加滑块阴影缓冲区，优化横向滚动效果

Browse Source
This commit is contained in:
jxxghp
2026-06-04 21:25:08 +08:00
parent 643ddcef07
commit fa90411c7a
1 changed files with 8 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/slide/VirtualSlideView.vue
+8 -3
View File
@@ -287,6 +287,9 @@ watch(
.slider-container { .slider-container {
position: relative; position: relative;
margin-block-end: 8px; margin-block-end: 8px;
--slider-shadow-bleed-start: 28px;
--slider-shadow-bleed-end: 56px;
} }
.slider-header { .slider-header {
@@ -350,11 +353,13 @@ watch(
} }
.slider-content { .slider-content {
margin-block-end: -8px; // 横向滚动会让纵向 visible 被浏览器计算成可裁剪区域，这里用缓冲区承接卡片阴影。
margin-block: calc(var(--slider-shadow-bleed-start) * -1) calc(var(--slider-shadow-bleed-end) * -1);
-ms-overflow-style: none !important; -ms-overflow-style: none !important;
overflow: scroll visible; overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-x: contain !important; overscroll-behavior-x: contain !important;
padding-block: 0 8px; padding-block: var(--slider-shadow-bleed-start) var(--slider-shadow-bleed-end);
padding-inline: 12px; padding-inline: 12px;
scroll-behavior: smooth; scroll-behavior: smooth;
scrollbar-width: none !important; scrollbar-width: none !important;