hicccc77/WeFlow
1
0
Fork 0
mirror of https://github.com/hicccc77/WeFlow.git synced 2026-03-25 07:16:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(sns): keep header area always visible

Browse Source
This commit is contained in:
tisonhuang
2026-03-02 13:49:16 +08:00
parent b5507b9f5d
commit 89f0758fbb
2 changed files with 83 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/pages/SnsPage.scss
View File

@@ -23,7 +23,7 @@
========================================= */ ========================================= */
.sns-main-viewport { .sns-main-viewport {
flex: 1; flex: 1;
overflow-y: scroll; overflow: hidden;
position: relative; position: relative;
display: flex; display: flex;
justify-content: center; justify-content: center;
@@ -35,7 +35,9 @@
padding: 20px 24px 60px 24px; padding: 20px 24px 60px 24px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 24px; gap: 0;
min-height: 0;
height: 100%;
} }
.feed-header { .feed-header {
@@ -44,9 +46,7 @@
justify-content: space-between; justify-content: space-between;
margin-bottom: 8px; margin-bottom: 8px;
padding: 0 4px; padding: 0 4px;
position: sticky; z-index: 2;
top: 0;
z-index: 20;
background: var(--sns-bg-color); background: var(--sns-bg-color);
border-bottom: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color);
padding-top: 10px; padding-top: 10px;
@@ -109,6 +109,13 @@
} }
} }
.sns-posts-scroll {
flex: 1;
min-height: 0;
overflow-y: auto;
padding-top: 16px;
}
.posts-list { .posts-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;

4
src/pages/SnsPage.tsx
View File

@@ -360,7 +360,7 @@ export default function SnsPage() {
return ( return (
<div className="sns-page-layout"> <div className="sns-page-layout">
<div className="sns-main-viewport" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}> <div className="sns-main-viewport">
<div className="sns-feed-container"> <div className="sns-feed-container">
<div className="feed-header"> <div className="feed-header">
<div className="feed-header-main"> <div className="feed-header-main">
@@ -417,6 +417,7 @@ export default function SnsPage() {
</div> </div>
</div> </div>
<div className="sns-posts-scroll" onScroll={handleScroll} onWheel={handleWheel} ref={postsContainerRef}>
{loadingNewer && ( {loadingNewer && (
<div className="status-indicator loading-newer"> <div className="status-indicator loading-newer">
<RefreshCw size={16} className="spinning" /> <RefreshCw size={16} className="spinning" />
@@ -491,6 +492,7 @@ export default function SnsPage() {
)} )}
</div> </div>
</div> </div>
</div>
<SnsFilterPanel <SnsFilterPanel
searchKeyword={searchKeyword} searchKeyword={searchKeyword}