优化

style.css

@@ -5,6 +5,21 @@
     box-sizing: border-box;
 }
 
+/* 防止滚动条导致的布局偏移 */
+html {
+    overflow-y: scroll; /* 始终显示垂直滚动条 */
+    scrollbar-width: thin; /* Firefox */
+}
+
+/* 搜索高亮样式 */
+.highlight {
+    background-color: rgba(74, 158, 255, 0.3);
+    border-radius: 2px;
+    padding: 0 2px;
+    font-weight: bold;
+    color: #ffffff;
+}
+
 body {
     font-family: var(--font-body);
     font-weight: var(--font-weight-body);
@@ -13,6 +28,7 @@ body {
     color: #e4e6eb;
     min-height: 100vh;
     overflow: hidden; /* 防止body滚动 */
+    padding-right: 0 !important; /* 防止滚动条导致的布局偏移 */
 }
 
 /* 布局 */
@@ -206,7 +222,7 @@ body {
     text-align: center;
 }
 
-/* 主内容区域 */
+/* 主内容区域 - 修复滚动条问题 */
 .content {
     flex: 1;
     margin-left: 240px;
@@ -214,12 +230,30 @@ body {
     background-color: #1a1b1e;
     position: relative;
     height: 100vh; /* 固定高度 */
-    overflow-y: auto; /* 允许内容滚动 */
+    overflow-y: scroll; /* 始终使用滚动，而不是auto */
     overflow-x: hidden;
     max-width: calc(100vw - 240px);
     display: flex;
     flex-direction: column;
     align-items: center;
+    scrollbar-width: thin; /* Firefox */
+}
+
+.content::-webkit-scrollbar {
+    width: 8px; /* 固定滚动条宽度 */
+}
+
+.content::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.content::-webkit-scrollbar-thumb {
+    background-color: rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+}
+
+.content::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(255, 255, 255, 0.2);
 }
 
 /* 搜索框容器 - 固定在顶部 */
@@ -851,6 +885,8 @@ body {
     flex-direction: column;
     align-items: center;
     z-index: 15;
+    transform: none !important; /* 确保没有变换 */
+    min-height: 400px; /* 确保最小高度，防止内容过少时的布局跳动 */
 }
 
 #search-results.active {
@@ -862,25 +898,36 @@ body {
 .search-section {
     width: 100%;
     max-width: 1100px;
-    margin: 0 auto;
+    margin: 0 auto 2.5rem auto; /* 添加底部间距 */
     position: relative;
     z-index: 1;
+    transform: none !important; /* 确保没有变换 */
+    opacity: 1 !important; /* 确保可见 */
+}
+
+/* 确保搜索结果中的网格有正确的间距 */
+.search-section .sites-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
+    gap: 1.2rem; /* 确保间距一致 */
+    position: relative;
+    z-index: 1;
+    width: 100%;
+}
+
+/* 确保搜索结果中的卡片样式正确 */
+.search-section .site-card {
+    margin: 0; /* 重置可能的外边距 */
+    width: 100%; /* 确保宽度正确 */
 }
 
 /* 清除之前可能导致问题的样式 */
 .page {
-    transform: none;
+    transform: none !important;
     visibility: visible;
     transition: none;
-}
-
-#search-results {
-    transform: none;
-}
-
-.search-section {
-    transform: none;
-    opacity: 1;
+    width: 100% !important; /* 确保宽度一致 */
+    left: 0 !important; /* 确保位置固定 */
 }
 
 /* 优化布局结构 */