網(wǎng)友投稿
722
2022-05-30
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技術已經在當前的前端開發(fā)中落后了，以后還是要逐步的取消對這種技術的使用。就拿目前這個滾動條的程序庫來說，已經有3年沒有更新了。
當今的技術發(fā)展，日新月異，新技術帶來的不僅僅是性能上的提升，而且還能夠提高程序員的開發(fā)效率。從而以更少的代碼實現(xiàn)更多的功能。去除在開發(fā)和部署中的盲點。
滾動條的主要作用是為了方便用戶在有限的空間內查看更多的內容，這種功能性的需求通過css實現(xiàn)。接下來我們就看看相關的內容。
我首先需要設定一個場景元素：
在上面的的這個場景中，?我們定義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中無法使用下面例子中的漸變色，一般的場景應該夠用了。
4.2??????????????????缺省風格
如果不對style-default做任何設置，顯示的結果是這樣的：
接下來對滾動條的風格進行定制：
4.3??????????????????風格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.4??????????????????風格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.5??????????????????風格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.6??????????????????風格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.7??????????????????風格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.8??????????????????風格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.9??????????????????風格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.10??????????????????風格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.11??????????????????風格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.12??????????????????風格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.13??????????????????風格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.14??????????????????風格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.15??????????????????風格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.16??????????????????風格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.17??????????????????風格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.18??????????????????風格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%);
}
jQuery
版權聲明：本文內容由網(wǎng)絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實的內容，請聯(lián)系我們jiasou666@gmail.com 處理，核實后本網(wǎng)站將在24小時內刪除侵權內容。
久久久久亚洲精品天堂|
亚洲一级特黄大片无码毛片|
亚洲色无码专区在线观看|
国产精品久久亚洲一区二区|
亚洲人成色在线观看|
一本色道久久综合亚洲精品蜜桃冫
|
亚洲精品GV天堂无码男同|
亚洲一区二区三区在线观看蜜桃|
亚洲视频中文字幕在线|
久久国产亚洲精品无码|
久久精品国产亚洲av麻豆小说|
亚洲AV日韩AV高潮无码专区|
久久精品国产精品亚洲蜜月|
亚洲国产精品无码专区影院
|
亚洲人成色77777在线观看|
亚洲欧洲国产综合|
亚洲一区在线视频|
亚洲综合色一区二区三区|
亚洲综合一区二区三区四区五区|
色天使亚洲综合在线观看|
亚洲人成77777在线观看网|
亚洲色少妇熟女11p|
亚洲JIZZJIZZ妇女|
亚洲Av无码乱码在线观看性色
|
亚洲视频手机在线|
亚洲欧洲日本精品|
精品亚洲国产成人|
亚洲欧美国产国产一区二区三区|
亚洲av无码专区青青草原|
偷自拍亚洲视频在线观看|
国产成人高清亚洲|
亚洲成在人线av|
亚洲精品国产免费|
学生妹亚洲一区二区|
亚洲av成本人无码网站|
亚洲日韩国产精品乱|
亚洲va久久久噜噜噜久久狠狠|
亚洲视频在线观看地址|
亚洲国产成人99精品激情在线|
亚洲丶国产丶欧美一区二区三区|
国产精品亚洲а∨天堂2021|
