vue中滚到页面最底部scrollTop不生效，解决

原创已于 2023-08-04 14:35:45 修改 · 2.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

于 2023-06-02 11:40:42 首次发布

这段代码展示了在Vue.js应用中，如何在点击子div后使父div自动滚动到底部。关键在于设置父div的overflow属性为auto，给定固定高度，并确保子div的高度大于父div。同时，利用$nextTick方法确保DOM更新后再进行滚动操作。

需要注意几点

<template>
  <div ref="main"  style="height:500px;overflow:auto;">
    <div  class="scrolldivmain" @click="scrollToBottom" style="height:3000px;width:80vw;background-color: aqua;"></div>
  </div>
</template>

<script>
export default {
  name: 'Thild6-to',
  mounted(){
    let that=this
    this.$nextTick(()=>{
       let main=that.$refs.main
      main.scrollTop = main.scrollHeight    
    })
  },
}
</script>

<style>

</style>

1.滚动的div必须是父级，2.父级需要设置overflow：auto和高度，3.子级高度比父级高度高

methods:{
    scrollToBottom(){
      let that=this
    this.$nextTick(()=>{
       let main=that.$refs.main
      main.scrollTop = main.scrollHeight    
    })
    }
  }

点击子页面后直接滚动到父级最底端

标签