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

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

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() {