快捷導(dǎo)航

vue滾動(dòng)條滾動(dòng)到頂部或者底部的方法

更新時(shí)間：2023年08月28日 10:16:02 作者：雙手依舞

這篇文章主要給大家介紹了關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的相關(guān)資料,文中通過(guò)代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

1:在滾動(dòng)條所屬 div 上加上 ref=“mianscroll” (mianscroll名稱隨意起)

<div ref="mianscroll">
  //中間內(nèi)容
</div>

2:點(diǎn)擊事件到頂部

topScrollClick() {
   this.$nextTick(() => {
     let scrollEl = this.$refs.mianscroll;
     scrollEl.scrollTo({ top: 0, behavior: 'smooth' });
   });
 },

3:點(diǎn)擊事件到底部

bottomScrollClick() {
      this.$nextTick(() => {
        let scrollEl = this.$refs.mianscroll;
        scrollEl.scrollTo({ top: scrollEl.scrollHeight, behavior: 'smooth' });
      });
}

注意點(diǎn)：一定要是給滾動(dòng)條所屬 div 添加如上方法，不然無(wú)法生效，滾動(dòng)的 div 的樣式是 overflow:auto

附：vue滾動(dòng)條自動(dòng)滾動(dòng)到底部

注意：在修改數(shù)據(jù)之后使用this.$nextTick，可以在回調(diào)中獲取更新后的 DOM，如果在當(dāng)前頁(yè)面沒(méi)有操作進(jìn)行DOM更新，可以省略。

<template>
      <div class="main" ref="main">
        <div ref="content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, nesciunt ea consequatur quisquam nostrum alias atque aliquam inventore expedita explicabo aspernatur doloremque distinctio necessitatibus culpa ducimus eaque accusamus. Quis, similique!
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ab quasi maxime voluptate accusamus rem consectetur laborum porro mollitia dicta nisi quas facere commodi quaerat sunt ea, iste explicabo, maiores atque.
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti recusandae delectus iure fugiat, vitae veniam ipsam quas ullam explicabo, corrupti optio quidem hic quam nisi inventore aperiam laborum atque! Ducimus!
          Lorem ipsum dolor sit, amet consectetur adipisicing elit. Neque non excepturi amet ex, tempora corporis repellat accusamus culpa aperiam perferendis reprehenderit illum consequuntur. Nemo nisi assumenda similique harum officia minus!
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Maxime eos eligendi, dolorum ullam reprehenderit ipsam et voluptas voluptatem facilis nobis animi at laudantium facere incidunt. Rerum sed nisi enim hic.
        </div>
      </div>
</template>
<script>
export default {
  name: 'home',
  mounted(){
     this.$nextTick(() => {
       this.$refs.main.scrollTop = this.$refs.content.scrollHeight;
     })
  }
}
</script>
<style>
.main{
  width: 100%;
  height: 200px;
  padding: 10px;
  box-sizing: border-box;
  background-color: pink;
  overflow: auto;
}
</style>
</script>

總結(jié)

到此這篇關(guān)于vue滾動(dòng)條滾動(dòng)到頂部或者底部的文章就介紹到這了,更多相關(guān)vue滾動(dòng)條滾動(dòng)到頂部或底部?jī)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: