- 微信
- 微博
  
  分享文章到微博
- 复制链接
  
  复制链接到剪贴板

滚动条网页应用技术研究

Jet Ding 发表于 2020/09/28 17:00:55 2020/09/28

【摘要】最近收到调研需求，是关于jquery.nicescroll的替换研究。我们先来看看这个库是干什么的。

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>

在上面的的这个场景中，我们定义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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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>

#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%);

}

【声明】本内容来自华为云开发者社区博主，不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息，否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱： cloudbbs@huaweicloud.com

点赞
收藏
关注作者

0/1000

抱歉，系统识别当前为高风险访问，暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称，即可参与社区互动！

*长度不超过10个汉字或20个英文字符，设置后3个月内不可修改。

确认取消

加入云驻计划，成为创作者

华为云周边好礼
免费体验产品
特殊身份标识
线下官方门票
内部专家零距离
与10000+优质创作者共同成长

立即加入

滚动条网页应用技术研究

1 引言

2 安装与依赖库

2.1 安装

3 用例

4 可能的替换技术

4.1 缺省风格

4.2 风格1

4.3 风格2

全部回复

设置昵称

关于作者

目录

加入云驻计划，成为创作者

滚动条网页应用技术研究

1 引言

2 安装与依赖库

2.1 安装

3 用例

4 可能的替换技术

4.1 缺省风格

4.2 风格1

4.3 风格2

全部回复

设置昵称

关于作者

目录

热门推荐查看更多

相关文章

加入云驻计划，成为创作者

相关产品