前端uniapp框架中＜scroll-view＞如何控制元素进行局部滚动详解

<template>
  <view class="container">
    <!-- 固定高度的滚动容器 -->
    <scroll-view 
      scroll-y 
      :scroll-top="scrollTop" 
      class="scroll-box"
      @scroll="handleScroll"
    >
      <!-- 滚动内容 -->
      <view v-for="item in list" :key="item" class="item">
        列表项 {{ item }}
      </view>
    </scroll-view>

    <!-- 控制按钮 -->
    <view class="controls">
      <button @click="scrollToTop">滚动到顶部</button>
      <button @click="scrollToBottom">滚动到底部</button>
      <button @click="addItem">添加新项</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: Array.from({length: 20}, (_,i) => i+1), // 初始20项
      scrollTop: 0,
      autoScrollBottom: true // 新增项时自动滚动到底部
    }
  },
  methods: {
    // 滚动到顶部
    scrollToTop() {
      this.scrollTop = 0
    },

    // 滚动到底部
    scrollToBottom() {
      this.$nextTick(() => {
        this.scrollTop = 99999 // 足够大的值触发到底部
      })
    },

    // 添加新项（模拟动态内容）
    addItem() {
      this.list.push(this.list.length + 1)
      
      // 自动滚动到底部
      if(this.autoScrollBottom) this.scrollToBottom()
    },

    // 监听滚动事件
    handleScroll(e) {
      console.log('当前滚动位置:', e.detail.scrollTop)
    }
  }
}
</script>

<style>
.container {
  padding: 20rpx;
}

/* 关键：必须设置固定高度 */
.scroll-box {
  height: 60vh; /* 占据屏幕60%高度 */
  border: 1rpx solid #eee;
}

.item {
  padding: 20rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.controls {
  margin-top: 20rpx;
  display: flex;
  gap: 10rpx;
  flex-wrap: wrap;
}

button {
  flex: 1;
  font-size: 28rpx;
  padding: 10rpx;
}
</style>

.scroll-box {
  height: 60vh; /* 必须设置固定高度 */
}

<scroll-view scroll-y> <!-- 纵向滚动 -->
<scroll-view scroll-x> <!-- 横向滚动 -->

scrollTop: 0 // 控制纵向滚动位置
scrollLeft: 0 // 控制横向滚动位置

addItem() {
  this.list.push(newItem)
  if(this.autoScrollBottom) this.scrollToBottom()
}

.scroll-box {
  -webkit-overflow-scrolling: touch; /* iOS弹性滚动 */
}

::-webkit-scrollbar {
  width: 4px;
  background: transparent;
}

scrollToBottom() {
      // 使用 nextTick 确保在 DOM 更新后执行滚动
      console.log("trigger scroll")
      this.$nextTick(() => {
        console.log("scrolling")
        // 设置一个较大的值确保滚动到底部
        this.mainScrollTop = 99999;
        
        // 使用uni-app的选择器获取scroll-view并调用滚动方法
        const query = uni.createSelectorQuery().in(this);
        query.select('.scroll-box').boundingClientRect(data => {
          if (data) {
            // 获取scroll-view的高度信息后执行滚动
            setTimeout(() => {
              this.mainScrollTop = data.height * 100; // 设置一个足够大的值
            }, 100);
          }
        }).exec();
      });
    },