Wed Jun 14 07:45:03 UTC 2023 inscode

src/components/TextPenetration.vue

 <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{