<script setup>

</script>
<!-- white-space: nowrap; -->
<!-- display: inline-block; -->
<template>
    <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> -->
</template>
<script setup>
const toView = (i) => {
  let pageId = document.querySelector("#main_" + i)
  pageId.scrollIntoView({
    left: pageId.offsetLeft,
    behavior:'smooth',
  })
  console.log(pageId.scrollTo())
  // 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{
  --bg: url('../assets/girl.jpg') no-repeat center;
  width: 100%;
  height: 100vh;
  background: var(--bg);
  background-size: cover;
}
.modal{
  background: rgba(0, 0, 0, .7);
  width: 100%;
  height: 100%;
}
.modal h1{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10vw;
  -webkit-text-stroke: 1px #fff;
  background: var(--bg);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
</style>
