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

转载于:https://www.cnblogs.com/LY-leo/p/5750059.html

用 mCustomScrollbar 滚动条插件实现滚动更新添加数据相关推荐

vue 实现数据滚动显示_vue实现动态添加数据滚动条自动滚动到底部的示例代码...
在使用vue实现聊天页面的时候,聊天数据动态加到页面中,需要实现滚动条也自动滚动到底部.这时我找到网上有个插件 vue-chat-scroll 但是安装后发现是用不了的,报错信息如下: VM14383 ...
jquery个性滚动条插件jquery.mCustomScrollbar.js的使用
jquery.mCustomScrollbar.js是一款非常漂亮的滚动条样式插件,同过它你可以自由的定制自己喜欢的滚动条. 而且兼容IE6 和IE7等的浏览器 <!DOCTYPE html&g ...
使用动态jenkins从节点和kubernetes进行实时滚动更新的Web服务器
The main motive of this article is to solve real-world problems. Can you imagine the loss of Instagr ...
万字长文带你全面认识 Kubernetes 中如何实现蓝绿部署、金丝雀发布和滚动更新...
Kubernetes 中的部署策略在本文中,我们将学习使用 Kubernetes 容器编排系统部署容器时的部署策略.在本文的最后,我们将学习如何在 Kubernetes 集群中使用不同的方式进行部署 ...
详细聊聊k8s deployment的滚动更新（二）
一.知识准备 ● 本文详细探索deployment在滚动更新时候的行为 ● 相关的参数介绍: livenessProbe:存活性探测.判断pod是否已经停止 readinessProbe:就绪 ...
php滚动窗口多条动态,详解原生JS是实现控制多个滚动条同步跟随滚动
本文主要和大家详解详解原生JS是实现控制多个滚动条同步跟随滚动,当这两个容器元素的内容都超出了容器高度,即都出现了滚动框的时候,如何在其中一个容器元素滚动时,让另外一个元素也随之滚动. 在一些支持用 ...
kubernetes(七)项目部署方式：蓝绿部署,灰度发布/金丝雀发布,滚动更新
在项目迭代的过程中,不可避免需要上线进行部署. 目前项目部署的方式有很多种:像重新部署,蓝绿部署,金丝雀部署(灰度部署),滚动更新.本文简单介绍下这些常见的部署方案以及使用k8s怎么进行对应部署重新 ...
不停机与停机更新_Istio的零停机滚动更新
不停机与停机更新本系列文章的第一部分介绍了如何在Kubernetes集群中实现真正的零停机时间更新. 我们专门解决了将流量从旧实例切换到新实例时出现的请求失败. 本文将展示如何使用Istio群集实现 ...
Istio的零停机滚动更新
本系列文章的第一部分介绍了如何在Kubernetes集群中实现真正的零停机时间更新. 我们专门解决了将流量从旧实例切换到新实例时出现的请求失败. 本文将展示如何使用Istio群集实现相同的目标. 服务 ...
15个带示例的jQuery滚动条插件
1.NiceScroll:可用于桌面.移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式.它支持Div.iFra ...

用 mCustomScrollbar 滚动条插件实现滚动更新添加数据

用 mCustomScrollbar 滚动条插件实现滚动更新添加数据相关推荐

最新文章

热门文章