diff --git a/src/components/TextPenetration.vue b/src/components/TextPenetration.vue
index be0b12935738bd5d896a6d894daeb9620d4cca11..7eb72b1e5abad909dee39aa0275dadc82e5378b8 100644
--- a/src/components/TextPenetration.vue
+++ b/src/components/TextPenetration.vue
@@ -1,14 +1,31 @@
 <script setup>
 
 </script>
-
+<!-- white-space: nowrap; -->
+<!-- display: inline-block; -->
 <template>
-  <div class="textPenetration">
+    <div style="width: 1000px; overflow-x: scroll; white-space: nowrap;">
+      <div :id="'main_' + i" v-for="i in 20" @click="toView(i)" style="display: inline-block; color: #fff; font-size: 36px; text-align: center; width: 100px; height: 100px; background: red; margin-right: 15px">
+          {{ i }}
+      </div>
+    </div>
+  <!-- <div class="textPenetration">
       <div class="modal">
         <h1>ABCDEFGHIJKLMN</h1>
       </div>
-  </div>
+  </div> -->
 </template>
+<script setup>
+const toView = (i) => {
+  let pageId = document.querySelector("#main_" + i)
+  pageId.scrollIntoView({
+        behavior:'smooth',//属性值：默认值auto（相当于instant）、平滑滚动smooth、瞬间滚动instant
+      })
+  // console.log(document.getElementById(i))
+  // console.log(document.getElementById(i).scrollIntoView(true))
+  // document.getElementById(i).scrollIntoView(true)
+}
+</script>
 
 <style scoped>
 .textPenetration{