From d1af3b94bf16c19e647f99fc7692767489861ec0 Mon Sep 17 00:00:00 2001
From: 64756fa621b77e6fc015a5d1 <64756fa621b77e6fc015a5d1@devide>
Date: Wed, 14 Jun 2023 07:45:03 +0000
Subject: [PATCH] Wed Jun 14 07:45:03 UTC 2023 inscode

---
 src/components/TextPenetration.vue | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/components/TextPenetration.vue b/src/components/TextPenetration.vue
index be0b129..7eb72b1 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{
-- 
GitLab