fix: mobile scroll - remove nested overflow on mobile, disable sticky thead on mobile, 2s interval

This commit is contained in:
root 2026-02-27 13:11:12 +00:00
parent 04d3219a1c
commit f27fdca6ac

View File

@ -80,7 +80,7 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
} catch {} } catch {}
}; };
fetch(); fetch();
const iv = setInterval(fetch, 1000); const iv = setInterval(fetch, 2000); // 移动端友好2秒刷新降低重排
return () => { running = false; clearInterval(iv); }; return () => { running = false; clearInterval(iv); };
}, [symbol]); }, [symbol]);
@ -99,13 +99,14 @@ function LiveTrades({ symbol }: { symbol: Symbol }) {
<span className="text-red-500 font-medium"> </span>= <span className="text-red-500 font-medium"> </span>=
</p> </p>
</div> </div>
{/* 固定高度容器,内部自己滚动,不影响页面 */} {/* 桌面端固定高度内滚,手机端展开不嵌套滚动 */}
<div className="overflow-y-auto" style={{ height: 420 }}> <div className="lg:overflow-y-auto lg:h-[420px]">
{loading ? ( {loading ? (
<div className="flex items-center justify-center h-24 text-slate-400 text-sm">...</div> <div className="flex items-center justify-center h-24 text-slate-400 text-sm">...</div>
) : ( ) : (
<table className="w-full text-xs"> <table className="w-full text-xs">
<thead className="sticky top-0 bg-white z-10 shadow-sm"> {/* 手机端关闭sticky避免触摸焦点被内层抢走 */}
<thead className="lg:sticky lg:top-0 bg-white z-10 shadow-sm">
<tr className="bg-slate-50 border-b border-slate-100"> <tr className="bg-slate-50 border-b border-slate-100">
<th className="text-left px-3 py-2 text-slate-500 font-medium"></th> <th className="text-left px-3 py-2 text-slate-500 font-medium"></th>
<th className="text-right px-3 py-2 text-slate-500 font-medium"></th> <th className="text-right px-3 py-2 text-slate-500 font-medium"></th>