用 mCustomScrollbar 滾動條插件實現滾動更新添加數據

在公司的一個小項目中，需要從后台獲取一大堆數據，為了用戶體驗的考慮，需要分部加載，然后就在網上找了很多的滾動插件，終於找到一個合適的。mCustomScrollbar插件地址 點擊這里

它有各種各樣的樣式，引入它的 js 和 css ，例如：

<link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/path/to/jquery.mCustomScrollbar.concat.min.js"></script>

 

然后可以在 html 里面直接調用，例如：

<div class="classname mCustomScrollbar" data-mcs-theme="minimal-dark">
</div>

其中 classname 是你自己給這個 div 一個樣式，比如設置 div 高度等，minimal-dark 是它其中一個樣式，可以在 mCustomScrollbar.css 中修改它的樣式，比如滾動條的寬度和顏色等。

 

如果要實現滾動獲取數據，就不能直接在 html 里直接調用，需要在<script></script>標簽里調用它，例如：

<script type="text/javascript">
    $(".classname").mCustomScrollbar({
          theme:"minimal-dark"
     });
</script>

這個和上面 html 直接調用效果是一樣的。

 

然后使用它的一個回調函數 whileScrolling，例如：

$(".classname").mCustomScrollbar({
　　theme: 'minimal-dark',
　　callbacks: {
　　　　whileScrolling: function(){      　// 只要滾動條滾動，這個函數就會執行
　　　　　　if (this.mcs.topPct >= 90) {    // 這表示當滾動條滾動到這個div的90%(當然這個值是可變的)的時候調用下面的代碼，
　　　　　　　　$.ajax({
　　　　　　　　　　// 用ajax去后台獲取數據，並把數據添加到這個div里
　　　　　　　　})
　　　　　　}
　　　　}
　　}
})