滚动条网页应用技术研究-更新Firefox支持

举报
Jet Ding 发表于 2021/07/22 18:16:27 2021/07/22
【摘要】 1       引言2       安装与依赖库2.1        安装3       用例4       可能的替换技术4.1        Firefox中滚动条的设置4.2        缺省风格4.3        风格14.4        风格24.5        风格34.6        风格44.7        风格54.8        风格64.9        ...

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实现。接下来我们就看看相关的内容。

 

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

 

<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                  Firefox中滚动条的设置

 

由于Firefox目前还不支持webkit伪码，我们需要特别设置如下两个属性：

 

    scrollbar-color: rebeccapurple green;

    scrollbar-width: thin;

虽然在Firefox中无法使用下面例子中的渐变色，一般的场景应该够用了。

 

38.png


4.2                  缺省风格

 

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

 

39.png


 

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

 

4.3                  风格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;

}

 

40.png


 

 

4.4                  风格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;

}

 

42.png

 


4.5                  风格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;

}

 

 

43.png

4.6                  风格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;

}

 

 

44.png


4.7                  风格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));

}

 

45.png


4.8                  风格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)

}

 

46.png


4.9                  风格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)));

}

 

 

47.png

4.10                  风格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;

}

 

48.png


4.11                  风格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)

}

 

49.png


4.12                  风格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)

}

 

 

50.png


4.13                  风格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)

}

 

 

51.png


4.14                  风格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)

}

 

 

52.png


4.15                  风格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)

}

 

 

53.png


4.16                  风格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)

}

 

54.png

4.17                  风格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))

}

 

55.png


 

4.18                  风格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%);

}

56.png

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

评论（0）

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

全部回复

上滑加载中

设置昵称

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

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

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

确认 取消

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

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