滚动条网页应用技术研究

网友投稿 648 2022-05-30

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    缺省风格

如果不对style-default做任何设置,显示的结果是这样的:

接下来对滚动条的风格进行定制:

4.2    风格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.3    风格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.4    风格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.5    风格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.6    风格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.7    风格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.8    风格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.9    风格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.10      风格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.11      风格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.12      风格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.13      风格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.14      风格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.15      风格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.16      风格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.17      风格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%);

}

软件开发 网站

版权声明:本文内容由网络用户投稿,版权归原作者所有,本站不拥有其著作权,亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容,请联系我们jiasou666@gmail.com 处理,核实后本网站将在24小时内删除侵权内容。

标签:不仅仅 滚动条 文件夹
上一篇:玩K8S不得不会的HELM
下一篇:C++ | 多线程(Thread、线程创建、线程池)
相关文章