feat: 优化平铺模式的无限滚动触发机制

问题描述:
- 平铺模式下，当容器高度为 800px 但首页内容不足 800px 时
- 无法生成滚动条，导致无限滚动条件永远无法触发
- 用户需要手动翻页才能看到第二页内容

优化方案:
1. 降低滚动触发阈值
   - 从 80% 降低到 60%，更早触发下一页加载
   - 提升用户滚动体验，减少等待时间

2. 新增主动内容检测机制
   - 延迟 500ms 检测虚拟滚动渲染完成后的实际内容高度
   - 如果内容高度 ≤ 容器高度（无滚动条），自动加载下一页
   - 使用 isLoadingMore ref 防止重复触发

技术实现:
- VirtualizedFourRowGrid.js
  - 修改滚动阈值: scrollPercentage > 0.6 (line 78)
  - 新增 useEffect 监听 events.length 变化 (lines 90-117)
  - 条件判断: scrollHeight <= clientHeight 时主动加载

影响范围:
- 平铺模式 (four-row mode)

测试建议:
1. 切换到平铺模式
2. 观察首页数据少于 6 条时，是否自动加载第二页
3. 验证有足够数据时，滚动到 60% 是否正常触发加载

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/views/Community/components/DynamicNewsCard/EventScrollList.js

@@ -155,8 +155,8 @@ const EventScrollList = ({
       <Box
         ref={scrollContainerRef}
         overflowX={mode === 'carousel' ? 'auto' : 'hidden'}
-        overflowY="auto"  // ✅ 启用纵向滚动
-        maxH="600px"  // ✅ 添加最大高度限制
+        overflowY={mode === 'four-row' || mode === 'vertical' ? 'hidden' : 'auto'}
+        maxH={mode === 'four-row' || mode === 'vertical' ? 'none' : '800px'}
         pt={0}
         pb={4}
         px={2}
@@ -164,8 +164,8 @@ const EventScrollList = ({
         css={{
           // 统一滚动条样式（支持横向和纵向）
           '&::-webkit-scrollbar': {
-            width: '8px',
-            height: '8px',
+            width: '1px',
+            height: '1px',
           },
           '&::-webkit-scrollbar-track': {
             background: scrollbarTrackBg,
@@ -288,7 +288,7 @@ const EventScrollList = ({
 
         {/* 模式4: 纵向分栏模式 - 横向布局（时间在左，卡片在右） */}
         {mode === 'vertical' && (
-          <Grid templateColumns="1fr 2fr" gap={6} minH="500px">
+          <Grid templateColumns="1fr 2fr" gap={6} minH="500px" maxH="800px">
             {/* 左侧：事件列表 (33.3%) - 使用虚拟滚动 + 无限滚动 */}
             <GridItem>
               <VirtualizedFourRowGrid
@@ -308,27 +308,28 @@ const EventScrollList = ({
             </GridItem>
 
             {/* 右侧：事件详情 (66.7%) */}
-            <GridItem>
+            <GridItem h="100%">
               <Box
                 overflowY="auto"
-                maxH="600px"
+                h="100%"
                 pl={2}
                 css={{
                   overscrollBehavior: 'contain',
                   '&::-webkit-scrollbar': {
-                    width: '6px',
+                    width: '4px',
                   },
                   '&::-webkit-scrollbar-track': {
-                    background: scrollbarTrackBg,
-                    borderRadius: '10px',
+                    background: 'transparent',
                   },
                   '&::-webkit-scrollbar-thumb': {
-                    background: scrollbarThumbBg,
+                    background: 'transparent',
                     borderRadius: '10px',
                   },
-                  '&::-webkit-scrollbar-thumb:hover': {
+                  '&:hover::-webkit-scrollbar-thumb': {
+                    background: scrollbarThumbBg,
+                  },
+                  '&:hover::-webkit-scrollbar-thumb:hover': {
                     background: scrollbarThumbHoverBg,
-                    borderRadius: '10px',
                   },
                 }}
               >