滾動(dòng)條網(wǎng)頁(yè)應(yīng)用技術(shù)研究
網(wǎng)友投稿
771
2025-04-02
1??????引言
最近收到調(diào)研需求，是關(guān)于jquery.nicescroll的替換研究。我們先來看看這個(gè)庫(kù)是干什么的。
Nicescroll是一個(gè)jquery插件，用于顯示漂亮的滾動(dòng)條，具有非常相似的ios/移動(dòng)設(shè)備風(fēng)格。
2??????安裝與依賴庫(kù)
它是一個(gè)jquery框架的插件，需要在你的腳本中加入jquery，適用于jQuery 1.x / 2.x / 3.x分支（瘦身版不適用）。
2.1????安裝
將加載腳本標(biāo)簽放在jquery腳本標(biāo)簽之后，并將加載縮放圖片放在腳本的同一文件夾中:?當(dāng)你使用縮放功能時(shí)，將圖片?"zoomico.png "復(fù)制到j(luò)query.nicescroll.js的同一文件夾中。
3??????用例
需要在文檔準(zhǔn)備好時(shí)初始化。
//?1.?簡(jiǎn)單模式，它對(duì)文檔的滾動(dòng)條進(jìn)行樣式設(shè)計(jì):
$(function()?{
$("body").niceScroll();
});
//?2.?實(shí)例化返回對(duì)象:
var?nice?=?false;
$(function()?{
nice?=?$("body").niceScroll();
});
//?3.?樣式化DIV，改變光標(biāo)顏色:
$(function()?{
$("#thisdiv").niceScroll({cursorcolor:"#00F"});
});
//?4.?帶?"包裝?"的DIV，由兩個(gè)div組成，前一個(gè)是vieport，后一個(gè)是內(nèi)容。
$(function()?{
$("#viewportdiv").niceScroll("#wrapperdiv",{cursorcolor:"#00F"});
});
//?5.?獲取nicescroll對(duì)象:
var?nice?=?$("#mydiv").getNiceScroll();
//?6.?隱藏滾動(dòng)條:
$("#mydiv").getNiceScroll().hide();
//?7.?當(dāng)內(nèi)容或位置改變時(shí),檢查滾動(dòng)條的大小:
$("#mydiv").getNiceScroll().resize();
//?8.?滾動(dòng)到一個(gè)位置:
$("#mydiv").getNiceScroll(0).doScrollLeft(x,?duration);?//?Scroll?X?Axis
$("#mydiv").getNiceScroll(0).doScrollTop(y,?duration);?//?Scroll?Y?Axis
4??????可能的替換技術(shù)
替換思路如下：?jquery技術(shù)已經(jīng)在當(dāng)前的前端開發(fā)中落后了，以后還是要逐步的取消對(duì)這種技術(shù)的使用。就拿目前這個(gè)滾動(dòng)條的程序庫(kù)來說，已經(jīng)有3年沒有更新了。
當(dāng)今的技術(shù)發(fā)展，日新月異，新技術(shù)帶來的不僅僅是性能上的提升，而且還能夠提高程序員的開發(fā)效率。從而以更少的代碼實(shí)現(xiàn)更多的功能。去除在開發(fā)和部署中的盲點(diǎn)。
滾動(dòng)條的主要作用是為了方便用戶在有限的空間內(nèi)查看更多的內(nèi)容，這種功能性的需求通過css實(shí)現(xiàn)。接下來我們就看看相關(guān)的內(nèi)容。
我首先需要設(shè)定一個(gè)場(chǎng)景元素：
在上面的的這個(gè)場(chǎng)景中，?我們定義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????缺省風(fēng)格
如果不對(duì)style-default做任何設(shè)置，顯示的結(jié)果是這樣的：
接下來對(duì)滾動(dòng)條的風(fēng)格進(jìn)行定制：
4.2????風(fēng)格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????風(fēng)格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????風(fēng)格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????風(fēng)格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????風(fēng)格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????風(fēng)格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????風(fēng)格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????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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??????風(fēng)格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%);
}
軟件開發(fā) 網(wǎng)站
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
版權(quán)聲明：本文內(nèi)容由網(wǎng)絡(luò)用戶投稿，版權(quán)歸原作者所有，本站不擁有其著作權(quán)，亦不承擔(dān)相應(yīng)法律責(zé)任。如果您發(fā)現(xiàn)本站中有涉嫌抄襲或描述失實(shí)的內(nèi)容，請(qǐng)聯(lián)系我們jiasou666@gmail.com 處理，核實(shí)后本網(wǎng)站將在24小時(shí)內(nèi)刪除侵權(quán)內(nèi)容。
亚洲日本乱码一区二区在线二产线
|
国产亚洲一区二区手机在线观看
|
亚洲男人的天堂网站|
亚洲美女人黄网成人女|
亚洲综合视频在线|
国产成人亚洲综合无码精品|
国产偷国产偷亚洲清高动态图|
亚洲精品专区在线观看|
亚洲av无码成人精品区|
国产精品亚洲а∨无码播放不卡
|
亚洲欧美乱色情图片|
亚洲日韩中文字幕一区|
亚洲最大av资源站无码av网址|
77777午夜亚洲|
亚洲mv国产精品mv日本mv|
亚洲网站在线播放|
久久亚洲AV成人无码软件
|
国产亚洲视频在线观看|
亚洲av无码国产精品色在线看不卡
|
久久精品亚洲一区二区三区浴池|
久久精品亚洲综合一品|
亚洲欧洲国产精品你懂的|
老司机亚洲精品影院|
亚洲色图.com|
亚洲中文字幕无码av在线|
亚洲卡一卡二卡乱码新区|
亚洲欧美乱色情图片|
国产亚洲精彩视频|
国产精品亚洲产品一区二区三区|
亚洲中文久久精品无码|
亚洲V无码一区二区三区四区观看|
亚洲AV无码一区东京热|
亚洲综合亚洲国产尤物|
亚洲入口无毒网址你懂的|
亚洲日本天堂在线|
亚洲精品国产精品乱码不卡|
中文字幕精品亚洲无线码一区|
亚洲成AV人在线观看天堂无码|
亚洲欧洲在线观看|
亚洲丰满熟女一区二区v|
亚洲av无码专区国产不乱码
|
