网友投稿
601
2022-05-30
1 引言
2 安装与依赖库
2.1 安装
3 用例
4 可能的替换技术
4.1 Firefox中滚动条的设置
4.2 缺省风格
4.3 风格1
4.4 风格2
4.5 风格3
4.6 风格4
4.7 风格5
4.8 风格6
4.9 风格7
4.10 风格8
4.11 风格9
4.12 风格10
4.13 风格11
4.14 风格12
4.15 风格13
4.16 风格14
4.17 风格15
4.18 风格16
5 参考
1 引言
最近收到调研需求，是关于jquery.nicescroll的替换研究。我们先来看看这个库是干什么的。
Nicescroll是一个jquery插件，用于显示漂亮的滚动条，具有非常相似的ios/移动设备风格。
2 安装与依赖库
它是一个jquery框架的插件，需要在你的脚本中加入jquery，适用于jQuery 1.x / 2.x / 3.x分支（瘦身版不适用）。
2.1 安装
将加载脚本标签放在jquery脚本标签之后，并将加载缩放图片放在脚本的同一文件夹中: 当你使用缩放功能时，将图片 "zoomico.png "复制到jquery.nicescroll.js的同一文件夹中。
3 用例
需要在文档准备好时初始化。
// 1. 简单模式，它对文档的滚动条进行样式设计:
$(function() {
$("body").niceScroll();
});
// 2. 实例化返回对象:
var nice = false;
$(function() {
nice = $("body").niceScroll();
});
// 3. 样式化DIV，改变光标颜色:
$(function() {
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
// 4. 带 "包装 "的DIV，由两个div组成，前一个是vieport，后一个是内容。
$(function() {
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});
// 5. 获取nicescroll对象:
var nice = $("#mydiv").getNiceScroll();
// 6. 隐藏滚动条:
$("#mydiv").getNiceScroll().hide();
// 7. 当内容或位置改变时,检查滚动条的大小:
$("#mydiv").getNiceScroll().resize();
// 8. 滚动到一个位置:
$("#mydiv").getNiceScroll(0).doScrollLeft(x, duration); // Scroll X Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y, duration); // Scroll Y Axis
4 可能的替换技术
替换思路如下： jquery技术已经在当前的前端开发中落后了，以后还是要逐步的取消对这种技术的使用。就拿目前这个滚动条的程序库来说，已经有3年没有更新了。
当今的技术发展，日新月异，新技术带来的不仅仅是性能上的提升，而且还能够提高程序员的开发效率。从而以更少的代码实现更多的功能。去除在开发和部署中的盲点。
滚动条的主要作用是为了方便用户在有限的空间内查看更多的内容，这种功能性的需求通过css实现。接下来我们就看看相关的内容。
我首先需要设定一个场景元素：
在上面的的这个场景中， 我们定义scrollbar为：
.scrollbar
{
margin-left: 30px;
float: left;
height: 300px;
width: 65px;
background: #F5F5F5;
overflow-y: scroll;
margin-bottom: 25px;
}
把force-overflow定义为：
.force-overflow
{
min-height: 450px;
}
4.1 Firefox中滚动条的设置
由于Firefox目前还不支持webkit伪码，我们需要特别设置如下两个属性：
scrollbar-color: rebeccapurple green;
scrollbar-width: thin;
虽然在Firefox中无法使用下面例子中的渐变色，一般的场景应该够用了。
4.2 缺省风格
如果不对style-default做任何设置，显示的结果是这样的：
接下来对滚动条的风格进行定制：
4.3 风格1
#style-1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-1::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #555;
}
4.4 风格2
#style-2::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 10px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-2::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
background-color: #D62929;
}
4.5 风格3
#style-3::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar {
width: 6px;
background-color: #F5F5F5;
}
#style-3::-webkit-scrollbar-thumb {
background-color: #000000;
}
4.6 风格4
#style-4::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-4::-webkit-scrollbar-thumb {
background-color: #000000;
border: 2px solid #555555;
}
4.7 风格5
#style-5::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-5::-webkit-scrollbar-thumb {
background-color: #0ae;
background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(.5, rgba(255, 255, 255, .2)), color-stop(.5, transparent), to(transparent));
}
4.8 风格6
#style-6::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-6::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}
4.9 风格7
#style-7::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-7::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-7::-webkit-scrollbar-thumb {
border-radius: 10px;
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.44, rgb(122, 153, 217)), color-stop(0.72, rgb(73, 125, 189)), color-stop(0.86, rgb(28, 58, 148)));
}
4.10 风格8
#style-8::-webkit-scrollbar-track {
border: 1px solid black;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-8::-webkit-scrollbar-thumb {
background-color: #000000;
}
4.11 风格9
#style-9::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-9::-webkit-scrollbar-thumb {
background-color: #F90;
background-image: -webkit-linear-gradient(90deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent)
}
4.12 风格10
#style-10::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-10::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-10::-webkit-scrollbar-thumb {
background-color: #AAA;
border-radius: 10px;
background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, .2) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, .2) 50%, rgba(0, 0, 0, .2) 75%, transparent 75%, transparent)
}
4.13 风格11
#style-11::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-11::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-11::-webkit-scrollbar-thumb {
background-color: #3366FF;
border-radius: 10px;
background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, 0.5) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.5) 75%, transparent 75%, transparent)
}
4.14 风格12
#style-12::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
border-radius: 10px;
background-color: #444444;
}
#style-12::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-12::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)
}
4.15 风格13
#style-13::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.9);
border-radius: 10px;
background-color: #CCCCCC;
}
#style-13::-webkit-scrollbar {
width: 12px;
background-color: #F5F5F5;
}
#style-13::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #D62929;
background-image: -webkit-linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.4) 50%, transparent, transparent)
}
4.16 风格14
#style-14::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
background-color: #CCCCCC;
}
#style-14::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-14::-webkit-scrollbar-thumb {
background-color: #FFF;
background-image: -webkit-linear-gradient(90deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 1) 25%, transparent 100%, rgba(0, 0, 0, 1) 75%, transparent)
}
4.17 风格15
#style-15::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-15::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-15::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-gradient(linear, 40% 0%, 75% 84%, from(#4D9C41), to(#19911D), color-stop(.6, #54DE5D))
}
4.18 风格16
#style-16::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #F5F5F5;
border-radius: 10px;
}
#style-16::-webkit-scrollbar {
width: 10px;
background-color: #F5F5F5;
}
#style-16::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #FFF;
background-image: -webkit-linear-gradient(top, #e4f5fc 0%, #bfe8f9 50%, #9fd8ef 51%, #2ab0ed 100%);
}
jQuery
版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。
