var positionTop=0, //位置為0
  screenPage=0, //顯示第一屏幕
  currentScrollTop=document.documentElement.scrollTop || document.body.scrollTop,
  currentNum=0,
  scrollTimer=null;
function vsSideBarFixed() {
  //滾動(dòng)吸頂
  var $activeSideBar=$("#hostvs");

  var navTop=0;
  if ($activeSideBar[0]) {
    navTop=$activeSideBar.offset().top;
  }
  $(document).scroll(function () {
    clearTimeout(scrollTimer);
    currentNum=0;
    var scrolltop=document.documentElement.scrollTop || document.body.scrollTop;
    // 完善
    if ($("#hostvs").length > 0 && $("#headernav .ajaxcontent").length <=0) {
      $("#headernav").append(
        `<div class="PageHeader-ajax">${$("#hostvs").html()}</div>`
      );
    }
    if ($("#navSearchInp").length > 0) {
      $("#navSearchInp").trigger("blur");
      $(document)
        .find("#headernav")
        .addClass("navhidden")
        .removeClass("navOpacity");
    }
    if (scrolltop > navTop) {
      $(document)
        .find("#headernav")
        .addClass("is-hidden")
        .find(".PageHeader-ajax")
        .addClass("is-shown");
    } else {
      $(document)
        .find("#headernav")
        .removeClass("is-hidden")
        .find(".PageHeader-ajax")
        .removeClass("is-shown");
    }

    //設(shè)置定時(shí)器
    scrollTimer=setInterval(function () {
      //判斷是否停止?jié)L動(dòng)
      if (scrolltop==currentScrollTop && currentNum <=5) {
        // console.log("滾動(dòng)條已停止");
        $(document)
          .find("#headernav")
          .removeClass("navhidden")
          .addClass("navOpacity");
      }
      //更新位置
      currentScrollTop=scrolltop;
      // console.log(`${currentScrollTop}----${scrolltop}`);
    }, 500);
  });
}
$(function () {
  vsSideBarFixed(); //吸頂效果
});

Vue.js中，要實(shí)現(xiàn)滾動(dòng)到底部的效果，可以通過(guò)以下幾個(gè)步驟來(lái)完成：

1. 獲取滾動(dòng)容器的高度和滾動(dòng)條的高度。

```javascript

// 獲取滾動(dòng)容器

const container=document.getElementById('container');

// 獲取滾動(dòng)容器的高度

const containerHeight=container.offsetHeight;

// 獲取滾動(dòng)條的高度

const scrollHeight=container.scrollHeight;

```

2. 判斷滾動(dòng)條是否已經(jīng)滾動(dòng)到底部。

```javascript

// 判斷滾動(dòng)條是否已經(jīng)滾動(dòng)到底部

const isScrollToBottom=container.scrollTop + containerHeight===scrollHeight;

```

3. 如果滾動(dòng)條已經(jīng)滾動(dòng)到底部，則執(zhí)行相應(yīng)的操作。

```javascript

if (isScrollToBottom) {

// 執(zhí)行滾動(dòng)到底部的操作

}

```

4. 為了實(shí)現(xiàn)滾動(dòng)到底部的效果，可以使用`scrollTo`方法來(lái)滾動(dòng)到指定位置。

```javascript

// 滾動(dòng)到底部

container.scrollTo(0, scrollHeight);

```

完整的代碼如下：

```html

<template>

<div id="container" style="height: 300px; overflow-y: scroll;">

<!-- 滾動(dòng)內(nèi)容 -->

</div>

</template>

<script>

export default {

mounted() {

// 獲取滾動(dòng)容器

const container=document.getElementById('container');

// 監(jiān)聽滾動(dòng)事件

container.addEventListener('scroll', this.handleScroll);

},

methods: {

handleScroll() {

// 獲取滾動(dòng)容器的高度

const containerHeight=this.$el.offsetHeight;

// 獲取滾動(dòng)條的高度

const scrollHeight=this.$el.scrollHeight;

// 判斷滾動(dòng)條是否已經(jīng)滾動(dòng)到底部

const isScrollToBottom=this.$el.scrollTop + containerHeight===scrollHeight;

if (isScrollToBottom) {

// 執(zhí)行滾動(dòng)到底部的操作

this.scrollToBottom();

}

},

scrollToBottom() {

// 滾動(dòng)到底部

this.$el.scrollTo(0, this.$el.scrollHeight);

}

}

}

</script>

```

這樣，當(dāng)滾動(dòng)條滾動(dòng)到底部時(shí)，就會(huì)執(zhí)行`scrollToBottom`方法，將滾動(dòng)條滾動(dòng)到底部。

icescroll 滾動(dòng)條插件是一個(gè)非常強(qiáng)大的基于 jQuery 的滾動(dòng)條插件，不需要增加額外的css，幾乎全瀏覽器兼容。ie6+，實(shí)現(xiàn)只需要一段代碼，侵入性非常小，樣式可完全自定義，支持觸摸事件，可在觸摸屏上使用。

有史以來(lái)最好的nicescroll版本-在現(xiàn)代瀏覽器和移動(dòng)設(shè)備中極其流暢和一致，資源使用率低

強(qiáng)大的不能讓你呼吸！兼容、適配、美觀都是那么完美！一起體驗(yàn)一下它的酣暢淋漓！

• 水平滾動(dòng)條支持！
• 它支持DIV，IFrame，textarea和文檔頁(yè)面（正文）滾動(dòng)條。
• 與所有最新的臺(tái)式機(jī)瀏覽器及更早版本兼容：Chrome，F(xiàn)irefox，Edge，IE8 +，Safari（win / mac），Opera。（所有A級(jí)瀏覽器）
• 與移動(dòng)設(shè)備兼容：iPad / iPhone / iPod，Android 4+，黑莓手機(jī)和Playbook（WebWorks / Table OS），Windows Phone 8和10。
• 與所有觸摸設(shè)備兼容：iPad，Android平板電腦，Window Surface。
• 與多輸入設(shè)備（帶觸摸或筆的鼠標(biāo)）兼容：Window Surface，觸摸筆記本上的Chrome桌面。
• 兼容2種方向鼠標(biāo)：Apple Magic Mouse，帶2 dir滾輪的Apple Mouser，帶2 dir滾輪的PC鼠標(biāo)（如果瀏覽器支持）。

因此，您擁有可用于iPad的動(dòng)量可定制和可滾動(dòng)div，并且所有臺(tái)式機(jī)和移動(dòng)平臺(tái)都具有一致的可滾動(dòng)區(qū)域。

性感的縮放功能，您可以“放大”任何nicescrolled div的內(nèi)容。全屏模式下div的所有內(nèi)容都易于使用和查看。它可以使用捏合手勢(shì)在移動(dòng)/觸摸設(shè)備的桌面設(shè)備（雙擊div）上工作。

在現(xiàn)代瀏覽器上，已經(jīng)實(shí)現(xiàn)了硬件加速滾動(dòng)。使用animationFrame進(jìn)行最流暢且節(jié)省CPU的滾動(dòng)。（當(dāng)瀏覽器支持時(shí)）

“使用嚴(yán)格的”經(jīng)過(guò)測(cè)試的腳本可獲得最高的代碼質(zhì)量。Bower和AMD準(zhǔn)備就緒。

對(duì)IE6 / 7用戶的警告（您為什么要使用？請(qǐng)升級(jí)到更穩(wěn)定和更現(xiàn)代的瀏覽器），已棄用對(duì)您的瀏覽器的支持。

特征

• 簡(jiǎn)單的安裝和激活，無(wú)需修改您的代碼即可使用。（可能會(huì)發(fā)生一些例外情況，因此您可以寫信給我）
• 非常時(shí)尚的滾動(dòng)條，不會(huì)占用您的窗口（原始瀏覽器滾動(dòng)條需要一些頁(yè)面空間，并減小了窗口/ div的可用寬度）
• 您也可以為主文檔滾動(dòng)條（正文）設(shè)置樣式！（并非所有設(shè)備/瀏覽器都支持此功能）
• 在所有瀏覽器上，您都可以滾動(dòng)：拖動(dòng)光標(biāo)，鼠標(biāo)滾輪（可自定義速度），鍵盤導(dǎo)航（光標(biāo)鍵，上移/下移鍵，主鍵/結(jié)束鍵）
• 滾動(dòng)流暢（如現(xiàn)代平板電腦瀏覽），速度可自定義
• 變焦功能
• 硬件加速滾動(dòng)（如果可用）
• 動(dòng)畫框架支持平滑滾動(dòng)和節(jié)省CPU
• 具有滾動(dòng)動(dòng)量的拖動(dòng)滾動(dòng)模式（作為觸摸設(shè)備）
• 已針對(duì)所有主流瀏覽器的桌面版和移動(dòng)版進(jìn)行測(cè)試
• 支持觸摸設(shè)備
• 支持多輸入設(shè)備（MSPointer / Pointer支持）
• 與其他許多瀏覽器和Webkit兼容！
• 滾動(dòng)條有很多可定制的功能
• 本機(jī)滾動(dòng)事件仍在起作用
• 與jQuery完全集成
• 與jQuery UI，jQuery Touch，jQuery Mobile兼容

具體的使用方法及其如何加載依賴，我這邊就不多說(shuō)了，大家可以上官網(wǎng)教程及gitHub上進(jìn)行查看。

這是URL：https://nicescroll.areaaperta.com

接下來(lái)我們欣賞一波吧！