vue3写移动端无滚动条上下滑动，以及滚动到底部判断

1、在父元素设置宽度，最大高度，隐藏滚动条，子元素是滚动内容

<template>
   <div class="mail-container">
       <div class="mail-card-content">
            展示内容----
       </div>
       <div class="mail-card-content">
            展示内容----
       </div>
       <div class="mail-card-content">
            展示内容----
       </div>
   </div>
</template>

<style>
.mail-container {
  width: 100%;
  max-height: 200px;
  box-sizing: border-box;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
 /* 纵向滚动，隐藏滚动条 */
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE10+ */
}
.mail-container::-webkit-scrollbar {
    display: none; /* ChromeSafari */
  }
.mail-card-content {
  width: 100%;
  height: 100px;
  background-color: #1b583f;
  display: flex;
  margin: 0.5rem 0;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}


/* 横向滚动，隐藏滚动条 */
/*
 overflow-x: auto;
 scrollbar-width: none; /* Firefox */
 -ms-overflow-style: none; /* IE10+ */
 &::-webkit-scrollbar {
    display: none; /* ChromeSafari */
 }
*/
</style>

2、判断滚动内容滚到父元素底部提示（提示：样式是scss写的）

<template>
  <div class="mail-container" ref="scrollWrapperRef" @scroll="handleScroll">
    <div style="width: 100%; max-height: 200px">
      <template v-if="listDate.length > 0">
        <div 
         v-for="item in listDate" 
         :key="item.id" 
         class="mail-card-content">
               内容展示区域---
        </div>
      </template>

      <template v-else>
        <div class="mail-no-message">暂无数据</div>
      </template>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
const listDate = ref([
  { id: 1, content: '内容1' },
  { id: 2, content: '内容2' },
  { id: 3, content: '内容3' },
])
const scrollWrapperRef = ref() //滚动区域的父元素
const handleScroll = () => { //滚动触发的事件
  const scrollWrapper = scrollWrapperRef.value // 获取滚动容器
  const { scrollTop, clientHeight, scrollHeight } = scrollWrapper // 获取滚动数据
  console.log('scrollWrapper', scrollTop, clientHeight, scrollHeight)
  // 判断是否滚动到底部
  if (scrollTop + clientHeight >= scrollHeight - 10) {
    // 滚动到底部时触发加载数据的函数
    console.log('滚动到底部啦！！！')
  }
}
</script>

<style scoped lang="scss">
.mail-container {
  width: 100%;
  max-height: 200px;
  box-sizing: border-box;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
 /* 隐藏滚动条 */
  overflow: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE10+ */
  &::-webkit-scrollbar {
    display: none; /* ChromeSafari */
  }
}
.mail-card-content {
  width: 100%;
  height: 100px;
  background-color: #1b583f;
  display: flex;
  margin: 0.5rem 0;
  flex-direction: column;
  box-sizing: border-box;
  padding: 1rem;
}
</style>