fix(web): 内容区顶部渐隐恢复(content-veil)
- 滚动后用 sticky 遮罩在内容顶端做 32px 渐变,避免卡片/标题被硬切 - 未滚动时 opacity 0,滚动阈值沿用 scrolled 状态(>4px) - 尊重 reduced-motion
This commit is contained in:
@@ -159,6 +159,29 @@
|
|||||||
padding-bottom: var(--su-space-10);
|
padding-bottom: var(--su-space-10);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 顶部渐隐:sticky 固定在滚动区顶端,内容从下面淡出而不是被硬切 */
|
||||||
|
.content-veil {
|
||||||
|
position: sticky;
|
||||||
|
top: 0;
|
||||||
|
z-index: 5;
|
||||||
|
height: 32px;
|
||||||
|
margin-bottom: -32px;
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
background: linear-gradient(to bottom, var(--su-bg-page) 0%, transparent 100%);
|
||||||
|
transition: opacity var(--su-duration-fast) var(--su-ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-veil.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
.content-veil {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|||||||
@@ -289,6 +289,9 @@ export default function App() {
|
|||||||
}
|
}
|
||||||
>
|
>
|
||||||
<div className="content">
|
<div className="content">
|
||||||
|
{/* 滚动后淡入的顶部遮罩,避免内容在容器顶边被硬切 */}
|
||||||
|
<div className={`content-veil${scrolled ? ' is-visible' : ''}`} aria-hidden="true" />
|
||||||
|
|
||||||
<SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
|
<SearchBar value={keyword} onChange={setKeyword} inputRef={searchRef} />
|
||||||
|
|
||||||
<h1 className="sr-only">Stash 本地应用工作区</h1>
|
<h1 className="sr-only">Stash 本地应用工作区</h1>
|
||||||
|
|||||||
Reference in New Issue
Block a user