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

以下是使用 <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 // 新增项