From 3966bae9c0c35321539e5b7e6c42e9bf2713d894 Mon Sep 17 00:00:00 2001 From: Xi Xu Date: Fri, 8 Aug 2025 21:53:00 +0800 Subject: [PATCH] Enhance scrollbars and scrolling UX in popup Improved the appearance and behavior of scrollbars in the .content and .platforms sections with custom styles, smooth scrolling, and auto-hide features. Added JavaScript logic for dynamic scrollbar visibility, visual feedback during scrolling, and keyboard navigation support for better accessibility and user experience. --- popup.html | 62 ++++++++++++++++++++++++----- popup.js | 112 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 164 insertions(+), 10 deletions(-) diff --git a/popup.html b/popup.html index a9ce5dc..283c92c 100644 --- a/popup.html +++ b/popup.html @@ -64,23 +64,62 @@ .content { padding: 20px; - max-height: calc(100vh - 70px); /* Adjust based on header height */ + max-height: calc(400px - 70px); /* Fixed height instead of viewport */ overflow-y: auto; + scroll-behavior: smooth; } - /* Custom Scrollbar */ - .content::-webkit-scrollbar { + /* Enhanced Custom Scrollbar */ + .content::-webkit-scrollbar, + .platforms::-webkit-scrollbar { width: 6px; } - .content::-webkit-scrollbar-track { + + .content::-webkit-scrollbar-track, + .platforms::-webkit-scrollbar-track { background: transparent; - } - .content::-webkit-scrollbar-thumb { - background: rgba(255, 255, 255, 0.3); border-radius: 3px; } - .content::-webkit-scrollbar-thumb:hover { - background: rgba(255, 255, 255, 0.5); + + .content::-webkit-scrollbar-thumb, + .platforms::-webkit-scrollbar-thumb { + background: rgba(255, 255, 255, 0.2); + border-radius: 3px; + transition: background 0.2s ease; + } + + .content::-webkit-scrollbar-thumb:hover, + .platforms::-webkit-scrollbar-thumb:hover { + background: rgba(255, 255, 255, 0.4); + } + + .content::-webkit-scrollbar-thumb:active, + .platforms::-webkit-scrollbar-thumb:active { + background: rgba(255, 255, 255, 0.6); + } + + /* Scrollbar corner for better appearance */ + .content::-webkit-scrollbar-corner, + .platforms::-webkit-scrollbar-corner { + background: transparent; + } + + /* Smooth scrolling support for Firefox */ + .content, + .platforms { + scrollbar-width: thin; + scrollbar-color: rgba(255, 255, 255, 0.2) transparent; + } + + /* Auto-hide scrollbar behavior */ + .content:not(:hover):not(:focus-within), + .platforms:not(:hover):not(:focus-within) { + scrollbar-width: none; + } + + .content:not(:hover):not(:focus-within)::-webkit-scrollbar, + .platforms:not(:hover):not(:focus-within)::-webkit-scrollbar { + width: 0; } .setting-group { @@ -174,12 +213,15 @@ } .platforms { - max-height: 220px; + max-height: 200px; overflow-y: auto; + overflow-x: hidden; margin-top: 8px; padding: 5px; border-radius: 8px; background: rgba(0, 0, 0, 0.1); + scroll-behavior: smooth; + scrollbar-gutter: stable; } .platform-category { diff --git a/popup.js b/popup.js index 372dbab..1674d47 100644 --- a/popup.js +++ b/popup.js @@ -112,6 +112,118 @@ function setupEventListeners() { element.addEventListener("change", saveSettings); } }); + + // 滚动优化逻辑 + setupScrollOptimization(); +} + +function setupScrollOptimization() { + const contentElement = document.querySelector(".content"); + const platformsElement = document.querySelector(".platforms"); + + // 为主内容区域添加滚动优化 + if (contentElement) { + let scrollTimeout; + + contentElement.addEventListener("scroll", () => { + // 添加滚动中的视觉反馈 + contentElement.style.scrollbarWidth = "auto"; + + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + // 滚动结束后隐藏滚动条（仅在不悬停时） + if (!contentElement.matches(":hover")) { + contentElement.style.scrollbarWidth = "thin"; + } + }, 1000); + }); + + // 鼠标悬停时显示滚动条 + contentElement.addEventListener("mouseenter", () => { + contentElement.style.scrollbarWidth = "auto"; + }); + + contentElement.addEventListener("mouseleave", () => { + contentElement.style.scrollbarWidth = "thin"; + }); + } + + // 为平台列表添加滚动优化 + if (platformsElement) { + let scrollTimeout; + + platformsElement.addEventListener("scroll", () => { + platformsElement.style.scrollbarWidth = "auto"; + + clearTimeout(scrollTimeout); + scrollTimeout = setTimeout(() => { + if (!platformsElement.matches(":hover")) { + platformsElement.style.scrollbarWidth = "thin"; + } + }, 1000); + }); + + platformsElement.addEventListener("mouseenter", () => { + platformsElement.style.scrollbarWidth = "auto"; + }); + + platformsElement.addEventListener("mouseleave", () => { + platformsElement.style.scrollbarWidth = "thin"; + }); + } + + // 添加键盘导航支持 + document.addEventListener("keydown", (e) => { + const activeElement = document.activeElement; + const isInScrollableArea = + activeElement && + (contentElement.contains(activeElement) || + platformsElement.contains(activeElement)); + + if (isInScrollableArea) { + switch (e.key) { + case "ArrowUp": + if (e.ctrlKey) { + e.preventDefault(); + const scrollable = contentElement.contains(activeElement) + ? contentElement + : platformsElement; + scrollable.scrollBy({ top: -50, behavior: "smooth" }); + } + break; + case "ArrowDown": + if (e.ctrlKey) { + e.preventDefault(); + const scrollable = contentElement.contains(activeElement) + ? contentElement + : platformsElement; + scrollable.scrollBy({ top: 50, behavior: "smooth" }); + } + break; + case "Home": + if (e.ctrlKey) { + e.preventDefault(); + const scrollable = contentElement.contains(activeElement) + ? contentElement + : platformsElement; + scrollable.scrollTo({ top: 0, behavior: "smooth" }); + } + break; + case "End": + if (e.ctrlKey) { + e.preventDefault(); + const scrollable = contentElement.contains(activeElement) + ? contentElement + : platformsElement; + scrollable.scrollTo({ + top: scrollable.scrollHeight, + behavior: "smooth", + }); + } + break; + } + } + }); } async function saveSettings() {