用 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里
　　　　　　　　})
　　　　　　}
　　　　}
　　}
})