滚动条网页应用技术研究

举报
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(xduration); // Scroll X Axis

$("#mydiv").getNiceScroll(0).doScrollTop(yduration); // Scroll Y Axis

 

4      可能的替换技术

替换思路如下: jquery技术已经在当前的前端开发中落后了,以后还是要逐步的取消对这种技术的使用。就拿目前这个滚动条的程序库来说,已经有3年没有更新了。

当今的技术发展,日新月异,新技术带来的不仅仅是性能上的提升,而且还能够提高程序员的开发效率。从而以更少的代码实现更多的功能。去除在开发和部署中的盲点。

滚动条的主要作用是为了方便用户在有限的空间内查看更多的内容,这种功能性的需求通过css实现。接下来我们就看看相关的内容。

我首先需要设定一个场景元素:

<div class="scrollbar" id="style-default">

  <div class="force-overflow"></div>

</div>

 

在上面的的这个场景中, 我们定义scrollbar为:

.scrollbar

{

    margin-left30px;

    floatleft;

    height300px;

    width65px;

    background#F5F5F5;

    overflow-yscroll;

    margin-bottom25px;

}

 

force-overflow定义为:

.force-overflow

{

    min-height450px;

}

 

 

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-shadowinset 0 0 6px rgba(0000.3);

    border-radius10px;

    background-color#F5F5F5;

}

 

#style-1::-webkit-scrollbar {

    width12px;

    background-color#F5F5F5;

}

 

#style-1::-webkit-scrollbar-thumb {

    border-radius10px;

    -webkit-box-shadowinset 0 0 6px rgba(000.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-shadowinset 0 0 6px rgba(0000.3);

    border-radius10px;

    background-color#F5F5F5;

}

 

#style-2::-webkit-scrollbar {

    width12px;

    background-color#F5F5F5;

}

 

#style-2::-webkit-scrollbar-thumb {

    border-radius10px;

    -webkit-box-shadowinset 0 0 6px rgba(000.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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

}

 

#style-3::-webkit-scrollbar {

    width6px;

    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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

}

 

#style-4::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-4::-webkit-scrollbar-thumb {

    background-color#000000;

    border2px solid #555555;

}

 

 

4.6    风格5

 

        <div class="scrollbar" id="style-5">

            <div class="force-overflow"></div>

        </div>

 

 

#style-5::-webkit-scrollbar-track {

    -webkit-box-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

}

 

#style-5::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-5::-webkit-scrollbar-thumb {

    background-color#0ae;

    background-image-webkit-gradient(linear0 00 100%color-stop(.5rgba(255255255.2)), color-stop(.5transparent), to(transparent));

}

 

4.7    风格6

 

        <div class="scrollbar" id="style-6">

            <div class="force-overflow"></div>

        </div>

 

 

#style-6::-webkit-scrollbar-track {

    -webkit-box-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

}

 

#style-6::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-6::-webkit-scrollbar-thumb {

    background-color#F90;

    background-image-webkit-linear-gradient(45degrgba(255255255.225%transparent 25%transparent 50%rgba(255255255.250%rgba(255255255.275%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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

    border-radius10px;

}

 

#style-7::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-7::-webkit-scrollbar-thumb {

    border-radius10px;

    background-image-webkit-gradient(linearleft bottomleft topcolor-stop(0.44rgb(122153217)), color-stop(0.72rgb(73125189)), color-stop(0.86rgb(2858148)));

}

 

 

4.9    风格8

 

        <div class="scrollbar" id="style-8">

            <div class="force-overflow"></div>

        </div>

 

 

#style-8::-webkit-scrollbar-track {

    border1px solid black;

    background-color#F5F5F5;

}

 

#style-8::-webkit-scrollbar {

    width10px;

    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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

}

 

#style-9::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-9::-webkit-scrollbar-thumb {

    background-color#F90;

    background-image-webkit-linear-gradient(90degrgba(255255255.225%transparent 25%transparent 50%rgba(255255255.250%rgba(255255255.275%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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

    border-radius10px;

}

 

#style-10::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-10::-webkit-scrollbar-thumb {

    background-color#AAA;

    border-radius10px;

    background-image-webkit-linear-gradient(90degrgba(000.225%transparent 25%transparent 50%rgba(000.250%rgba(000.275%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-shadowinset 0 0 6px rgba(0000.3);

    background-color#F5F5F5;

    border-radius10px;

}

 

#style-11::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-11::-webkit-scrollbar-thumb {

    background-color#3366FF;

    border-radius10px;

    background-image-webkit-linear-gradient(0degrgba(2552552550.525%transparent 25%transparent 50%rgba(2552552550.550%rgba(2552552550.575%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-shadowinset 0 0 6px rgba(0000.9);

    border-radius10px;

    background-color#444444;

}

 

#style-12::-webkit-scrollbar {

    width12px;

    background-color#F5F5F5;

}

 

#style-12::-webkit-scrollbar-thumb {

    border-radius10px;

    background-color#D62929;

    background-image-webkit-linear-gradient(90degtransparentrgba(0000.450%transparenttransparent)

}

 

 

4.14      风格13

 

        <div class="scrollbar" id="style-13">

            <div class="force-overflow"></div>

        </div>

 

 

#style-13::-webkit-scrollbar-track {

    -webkit-box-shadowinset 0 0 6px rgba(0000.9);

    border-radius10px;

    background-color#CCCCCC;

}

 

#style-13::-webkit-scrollbar {

    width12px;

    background-color#F5F5F5;

}

 

#style-13::-webkit-scrollbar-thumb {

    border-radius10px;

    background-color#D62929;

    background-image-webkit-linear-gradient(90degtransparentrgba(0000.450%transparenttransparent)

}

 

 

4.15      风格14

 

        <div class="scrollbar" id="style-14">

            <div class="force-overflow"></div>

        </div>

 

 

#style-14::-webkit-scrollbar-track {

    -webkit-box-shadowinset 0 0 6px rgba(0000.6);

    background-color#CCCCCC;

}

 

#style-14::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-14::-webkit-scrollbar-thumb {

    background-color#FFF;

    background-image-webkit-linear-gradient(90degrgba(00010%rgba(000125%transparent 100%rgba(000175%transparent)

}

 

 

4.16      风格15

 

        <div class="scrollbar" id="style-15">

            <div class="force-overflow"></div>

        </div>

 

 

#style-15::-webkit-scrollbar-track {

    -webkit-box-shadowinset 0 0 6px rgba(0000.1);

    background-color#F5F5F5;

    border-radius10px;

}

 

#style-15::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-15::-webkit-scrollbar-thumb {

    border-radius10px;

    background-color#FFF;

    background-image-webkit-gradient(linear40% 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-shadowinset 0 0 6px rgba(0000.1);

    background-color#F5F5F5;

    border-radius10px;

}

 

#style-16::-webkit-scrollbar {

    width10px;

    background-color#F5F5F5;

}

 

#style-16::-webkit-scrollbar-thumb {

    border-radius10px;

    background-color#FFF;

    background-image-webkit-linear-gradient(top#e4f5fc 0%#bfe8f9 50%#9fd8ef 51%#2ab0ed 100%);

}

 



【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

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

全部回复

上滑加载中

设置昵称

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

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

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

举报
请填写举报理由
0/200