Auto Commit

src/App.vue

 <script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
+  <div 
+    ref="scrollContainer" 
+    class="scroll-container" 
+    @scroll="handleScroll"
+  >
+    <div class="scroll-content">
+      <!-- 让第一个元素为 spacer，最左边有间距 -->
+      <div class="spacer"></div>
+      <div 
+        v-for="(item, index) in 20" 
+        :key="index" 
+        class="scroll-item"
+      >
+        <!-- 元素内容 -->
+      </div>
+       <div class="spacer"></div>
     </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  </div>
 </template>
 
 <style scoped>
-header {
-  line-height: 1.5;
+.scroll-container {
+  margin: 0 auto;
+  width: 375px;
+  overflow-x: auto;
+  white-space: nowrap;
+  scroll-snap-type: x mandatory; /* 强制滚动到snap目标 */
+  -webkit-scroll-snap-type: x mandatory; 
+  -webkit-overflow-scrolling: touch; /* 移动端平滑滚动 */
+  scroll-behavior: smooth; /**强制平滑滚动（电脑端） */
 }
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
+.scroll-container::-webkit-scrollbar {
+  display: none;
 }
 
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+.scroll-content{
+  display: flex;
+}
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+.spacer{
+  flex-shrink: 0;
+  width: 10px;
+  height: 149px;
+  scroll-snap-align: start;
+  -webkit-scroll-snap-align: start;
+  display: inline-block;
+}
+.scroll-item {
+  flex-shrink: 0;
+  scroll-snap-align: start;
+  -webkit-scroll-snap-align: start;
+  scroll-snap-stop:always;
+  display: inline-block;
+  margin-left: 8px;
+  width: 112px;
+  height: 149px;
+  background-color: red;
+  
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
-  }
+  /*每个 .scroll-item 会向左和向右偏移 13px,视觉效果：滚动到某个元素时，该元素居中，前后元素各露出 13px*/
+  scroll-margin-left: 13px;
+  scroll-margin-right:13px;
+  -webkit-scroll-margin-left: 13px;
+  -webkit-scroll-margin-right: 13px;
+}
+.scroll-item:nth-child(2){
+  margin-left: 0;
 }
 </style>