fix(scroll): 修复页面滚动时的闪烁问题

Author: CC11001100

script-hook-website/src/App.css

@@ -2,4 +2,38 @@
   min-height: 100vh;
   display: flex;
   flex-direction: column;
+  contain: layout style;
+  will-change: contents;
+} 
+
+/* 防止滚动闪烁 */
+html {
+  scroll-behavior: smooth;
+  height: 100%;
+  overflow-anchor: none;
+}
+
+body {
+  min-height: 100%;
+  overflow-x: hidden;
+}
+
+/* 确保图片和其他元素在加载前预留空间 */
+img, iframe, video {
+  height: auto;
+  max-width: 100%;
+}
+
+/* 确保主要区域有最小高度，防止布局跳跃 */
+.container {
+  min-height: 50vh;
+  /* 减少布局计算 */
+  contain: layout style;
+}
+
+/* 优化滚动体验 */
+@media (prefers-reduced-motion: no-preference) {
+  html {
+    scroll-behavior: smooth;
+  }
 } 

script-hook-website/src/App.tsx

@@ -1,5 +1,5 @@
-import React from 'react';
-import { HashRouter as Router, Routes, Route, Navigate } from 'react-router-dom';
+import React, { useEffect } from 'react';
+import { HashRouter as Router, Routes, Route, Navigate, useLocation } from 'react-router-dom';
 import Header from './components/Header';
 import Hero from './components/Hero';
 import Features from './components/Features';
@@ -8,12 +8,25 @@ import FeatureTree from './components/FeatureTree';
 import DetailedFeatures from './components/DetailedFeatures';
 import Installation from './components/Installation';
 import Support from './components/Support';
-import StarHistory from './components/StarHistory';
 import CommunityGroup from './components/CommunityGroup';
 import Footer from './components/Footer';
 import GitHubStarButton from './components/GitHubStarButton';
 import './App.css';
 
+// 滚动恢复组件，防止路由切换时的滚动问题
+const ScrollToTop: React.FC = () => {
+  const { pathname, hash } = useLocation();
+  
+  useEffect(() => {
+    // 只有当没有hash值或hash值为空时，才滚动到顶部
+    if (!hash) {
+      window.scrollTo(0, 0);
+    }
+  }, [pathname, hash]);
+  
+  return null;
+};
+
 // 封装主页面内容为一个组件
 const HomePage: React.FC = () => {
   return (
@@ -34,9 +47,43 @@ const HomePage: React.FC = () => {
 };
 
 const App: React.FC = () => {
+  // 禁用滚动恢复
+  useEffect(() => {
+    // 如果存在 history.scrollRestoration 属性，则禁用自动滚动恢复
+    if ('scrollRestoration' in history) {
+      history.scrollRestoration = 'manual';
+    }
+    
+    // 防止滚动跳跃
+    let isScrolling = false;
+    let scrollTimeout: number | null = null;
+    
+    const handleScroll = () => {
+      isScrolling = true;
+      
+      if (scrollTimeout !== null) {
+        window.clearTimeout(scrollTimeout);
+      }
+      
+      scrollTimeout = window.setTimeout(() => {
+        isScrolling = false;
+      }, 150);
+    };
+    
+    window.addEventListener('scroll', handleScroll, { passive: true });
+    
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+      if (scrollTimeout !== null) {
+        window.clearTimeout(scrollTimeout);
+      }
+    };
+  }, []);
+
   return (
     <Router>
       <div className="app">
+        <ScrollToTop />
         <Routes>
           <Route path="/" element={<HomePage />} />
           {/* 添加其他路由，如果未来需要子页面 */}

script-hook-website/webpack.config.js

@@ -1,48 +1,63 @@
 const path = require('path');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 
-module.exports = {
-  entry: './src/index.tsx',
-  output: {
-    path: path.resolve(__dirname, 'dist'),
-    filename: 'bundle.js',
-    publicPath: './',
-  },
-  resolve: {
-    extensions: ['.ts', '.tsx', '.js', '.jsx'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.tsx?$/,
-        use: 'ts-loader',
-        exclude: /node_modules/,
-      },
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
+module.exports = (env, argv) => {
+  const isProduction = argv.mode === 'production';
+  
+  return {
+    entry: './src/index.tsx',
+    output: {
+      path: path.resolve(__dirname, 'dist'),
+      filename: 'bundle.js',
+      publicPath: isProduction ? './' : '/',
+    },
+    resolve: {
+      extensions: ['.ts', '.tsx', '.js', '.jsx'],
+    },
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.css$/,
+          use: ['style-loader', 'css-loader'],
+        },
+        {
+          test: /\.(png|jpe?g|gif|svg)$/i,
+          type: 'asset/resource',
+        },
+      ],
+    },
+    plugins: [
+      new HtmlWebpackPlugin({
+        template: './public/index.html',
+        meta: {
+          'Cache-Control': {'http-equiv': 'Cache-Control', 'content': 'no-cache, no-store, must-revalidate'},
+          'Pragma': {'http-equiv': 'Pragma', 'content': 'no-cache'},
+          'Expires': {'http-equiv': 'Expires', 'content': '0'}
+        }
+      }),
+    ],
+    devServer: {
+      static: {
+        directory: path.join(__dirname, 'public'),
       },
-      {
-        test: /\.(png|jpe?g|gif|svg)$/i,
-        type: 'asset/resource',
+      compress: true,
+      port: 'auto',
+      hot: true,
+      historyApiFallback: true,
+      devMiddleware: {
+        publicPath: '/'
+      }
+    },
+    optimization: {
+      runtimeChunk: 'single',
+      splitChunks: {
+        chunks: 'all',
       },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: './public/index.html',
-    }),
-  ],
-  devServer: {
-    static: {
-      directory: path.join(__dirname, 'public'),
     },
-    compress: true,
-    port: 3000,
-    hot: true,
-    historyApiFallback: true,
-    devMiddleware: {
-      publicPath: '/'
-    }
-  },
+  };
 };