滚动条网页应用技术研究
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实现。接下来我们就看看相关的内容。
我首先需要设定一个场景元素：
<div class="scrollbar" id="style-default">
<div class="force-overflow"></div>
</div>
在上面的的这个场景中， 我们定义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 缺省风格
如果不对style-default做任何设置，显示的结果是这样的：
接下来对滚动条的风格进行定制：
4.2 风格1
<div class="scrollbar" id="style-1">
<div class="force-overflow"></div>
</div>
#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.3 风格2
<div class="scrollbar" id="style-2">
<div class="force-overflow"></div>
</div>
#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.4 风格3
<div class="scrollbar" id="style-3">
<div class="force-overflow"></div>
</div>
#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.5 风格4
<div class="scrollbar" id="style-4">
<div class="force-overflow"></div>
</div>
#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.6 风格5
<div class="scrollbar" id="style-5">
<div class="force-overflow"></div>
</div>
#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.7 风格6
<div class="scrollbar" id="style-6">
<div class="force-overflow"></div>
</div>
#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.8 风格7
<div class="scrollbar" id="style-7">
<div class="force-overflow"></div>
</div>
#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.9 风格8
<div class="scrollbar" id="style-8">
<div class="force-overflow"></div>
</div>
#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.10 风格9
<div class="scrollbar" id="style-9">
<div class="force-overflow"></div>
</div>
#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.11 风格10
<div class="scrollbar" id="style-10">
<div class="force-overflow"></div>
</div>
#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.12 风格11
<div class="scrollbar" id="style-11">
<div class="force-overflow"></div>
</div>
#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.13 风格12
<div class="scrollbar" id="style-12">
<div class="force-overflow"></div>
</div>
#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.14 风格13
<div class="scrollbar" id="style-13">
<div class="force-overflow"></div>
</div>
#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.15 风格14
<div class="scrollbar" id="style-14">
<div class="force-overflow"></div>
</div>
#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.16 风格15
<div class="scrollbar" id="style-15">
<div class="force-overflow"></div>
</div>
#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.17 风格16
<div class="scrollbar" id="style-16">
<div class="force-overflow"></div>
</div>
#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%);
}
- 点赞
- 收藏
- 关注作者
评论（0）