feat: add scroll-snap section-by-section for mobile

This commit is contained in:
Omega 2026-04-20 23:15:28 +08:00
parent 624bb422bb
commit e38cfed764
1 changed files with 31 additions and 0 deletions

View File

@ -446,10 +446,19 @@
/* 移动端痛点沉浸式布局 */
@media (max-width: 900px) {
/* 逐屏吸附:整个页面每次滚动就是一屏 */
body {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}
.hero, #solutions, #approach, #geo, #contact, footer {
scroll-snap-align: start;
}
/* 痛点半块单列全屏 */
#pain-points {
overflow: visible;
text-align: center;
scroll-snap-align: start;
}
#pain-points .section-label {
margin-bottom: 40px;
@ -507,6 +516,8 @@
overflow: visible;
position: relative;
z-index: 1;
scroll-snap-align: start;
scroll-snap-stop: always;
}
.pain-item::before { display: none; }
.pain-item:hover { background: transparent; }
@ -631,6 +642,26 @@
.project-img { width: 100%; height: 300px; }
h1 { font-size: 42px; letter-spacing: -1px; }
.nav-links { display: none; }
/* 其他板块也至少一屏 */
#solutions, #approach, #geo, #contact {
min-height: 100vh;
min-height: 100dvh;
}
#solutions .project-row {
margin-bottom: 0;
padding: 60px 0;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
#approach .approach-item {
padding: 60px 0;
}
#geo .container {
display: flex;
flex-direction: column;
justify-content: center;
min-height: 80vh;
}
}
</style>
</head>