<script setup lang="ts">
import XBatterScroll from './xxl-ui/common/components/XBatterScroll.vue'
import { ref } from 'vue'

const t = ref<HTMLElement>()

function a(t: any) {
  // console.log("t",t);
  // console.log(t)
}
const count = ref<number>(18)
function te(t: number) {
  count.value = t
}
const tochlist = ref<TouchList>()
function test(e: TouchList) {
  console.log(e)
  // tochlist.value.push(e)
  tochlist.value = e
  // console.log(tochlist.value);
}

window.te = te
</script>

<template>
  <div class="test">
    <x-batter-scroll
      ref="t"
      scroll-bar
      width="300px"
      height="600px"
      @scroll="a"
      @hit-bottom="test"
      :scroll="{ back: 'blueviolet',sHeight:100 }">
      <p class="ttt" v-for="i in count" :key="i">这是{{ i }}</p>
    </x-batter-scroll>
  </div>

  <div v-for="item in tochlist">
    y:{{ item.clientY }} id: {{ item.identifier }}
  </div>
  <div class="container">
    <div class="box" v-for="i in 100">Box {{ i }}</div>

  </div>
</template>

<style>
.test {
  width: 250px;
  height: 1200px;
}
.ttt {
  width: 400px;
}
</style>
<style>
    .container {
      overflow: auto;
      scroll-snap-type: y mandatory;
      height: 200px;
    }

    .box {
      scroll-snap-align: center;
      height: 100px;
      background-color: lightgray;
      margin-bottom: 10px;
    }
  </style>
