shishengliang/ln-bi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: overflow-x-hidden 改为 overflow-x:clip 修复 sticky 吸顶

Browse Source 
overflow-x:hidden 会创建滚动容器导致 position:sticky 失效，
改用 overflow-x:clip 裁剪溢出但不破坏 sticky 定位。

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
kkfluous
2026-04-02 00:15:38 +08:00
parent c5ee78e892
commit 787fa27949
3 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Shell.tsx
View File

@@ -58,7 +58,7 @@ export function Shell({ modules }: { modules: ModuleConfig[] }) {
</nav> </nav>
{/* 内容区 */} {/* 内容区 */}
<main className="flex-1 md:ml-16 pb-16 md:pb-0 min-w-0 overflow-x-hidden"> <main className="flex-1 md:ml-16 pb-16 md:pb-0 min-w-0" style={{ overflowX: 'clip' }}>
{ActiveComponent && <ActiveComponent />} {ActiveComponent && <ActiveComponent />}
</main> </main>

2
src/modules/mileage/MileageModule.tsx
View File

@@ -9,7 +9,7 @@ export default function MileageModule() {
const [activeSubTab, setActiveSubTab] = useState<'monitoring' | 'statistics' | 'report'>('monitoring'); const [activeSubTab, setActiveSubTab] = useState<'monitoring' | 'statistics' | 'report'>('monitoring');
return ( return (
<div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative overflow-x-hidden"> <div className="min-h-screen bg-[#F8F9FB] text-gray-800 font-sans p-3 md:p-6 relative" style={{ overflowX: 'clip' }}>
<div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden"> <div className="max-w-6xl mx-auto flex flex-col gap-3 pb-16 landscape:pb-0 landscape:h-full landscape:flex-1 landscape:overflow-hidden">
{/* Sub-navigation — sticky */} {/* Sub-navigation — sticky */}
<div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30"> <div className="bg-white px-4 py-2 rounded-2xl border border-slate-100 shadow-sm flex items-center gap-6 sticky top-0 z-30">

2
src/modules/mileage/StatisticsView.tsx
View File

@@ -62,7 +62,7 @@ export default function StatisticsView() {
}, [selectedTargetId]); }, [selectedTargetId]);
return ( return (
<div className="space-y-2 pb-2 landscape:pb-4 landscape:h-full landscape:overflow-hidden landscape:flex landscape:flex-col flex-none landscape:flex-1 overflow-x-hidden"> <div className="space-y-2 pb-2 landscape:pb-4 landscape:h-full landscape:overflow-hidden landscape:flex landscape:flex-col flex-none landscape:flex-1" style={{ overflowX: 'clip' }}>
{/* Project Selector - Full width even in landscape */} {/* Project Selector - Full width even in landscape */}
<div className="bg-white landscape:bg-slate-900/50 landscape:border-slate-800 p-2 rounded-2xl shadow-sm border border-slate-100 flex gap-1 overflow-x-auto no-scrollbar flex-shrink-0"> <div className="bg-white landscape:bg-slate-900/50 landscape:border-slate-800 p-2 rounded-2xl shadow-sm border border-slate-100 flex gap-1 overflow-x-auto no-scrollbar flex-shrink-0">
{targets.map(target => ( {targets.map(target => (