vue控制滚动条

vue控制滚动条

1

首先给需要控制的div注册ref，在用函数去控制。

<div ref="productGoods"  class="product_goods" :style="{height:goodsheight}">
        <mi-product  v-for="(items,i) in 20" :key="i"  /> // 中间出现的子元素
</div>

// 这里使用的elment UI框架
<el-button @click="nextPage(1,1)">上一页</el-button>
<el-button @click="nextPage(1,2)">下一页</el-button>

实现函数：

 nextPage(val,type){
      if(val==1 && type==1){
      //  上一页按钮
        this.$nextTick(()=>{
          this.$refs.productGoods.scrollTop-=100 // 向上走100 像素
        })
      }else if(val==1 && type==2){
        // 下一页按钮
        this.$nextTick(()=>{
          this.$refs.productGoods.scrollTop+=100
        })
      }
      // 类似的还有  scrollLeft(距离左侧)   scrollRight(距离右侧)等
      console.log(this.$refs.productGoods.scrollTop)
    },