jquery.nicescroll.min.js滾動(dòng)條使用方法

(摘自博客園，原網(wǎng)址)

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站設(shè)計(jì)、成都網(wǎng)站設(shè)計(jì)與策劃設(shè)計(jì),昌都網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)10多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:昌都等地區(qū)。昌都做網(wǎng)站價(jià)格咨詢:13518219792

jquery.nicescroll.min.js滾動(dòng)條使用方法,Nicescroll是制作自定義滾動(dòng)條的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit內(nèi)核瀏覽器(chrome,safari)以及智能終端設(shè)備瀏覽器的滾動(dòng)條。

頁(yè)面使用：

$("html").niceScroll({

cursorcolor:"#E62020",

cursoropacitymax:1,

touchbehavior:false,

cursorwidth:"10px",

cursorborder:"0",

cursorborderradius:"5px"

})

nicescroll詳細(xì)參數(shù)配置：

cursorcolor - 設(shè)置滾動(dòng)條顏色，默認(rèn)值是“＃000000”

cursoropacitymin - 滾動(dòng)條透明度最小值

cursoropacitymax - 滾動(dòng)條透明度最大值

cursorwidth - 滾動(dòng)條的寬度像素，默認(rèn)為5（你可以寫“5PX”）

cursorborder - CSS定義邊框，默認(rèn)為“1px solid #FFF”

cursorborderradius - 滾動(dòng)條的邊框圓角

ZIndex的 - 改變滾動(dòng)條的DIV的z-index值，默認(rèn)值是9999

scrollspeed - 滾動(dòng)速度，默認(rèn)值是60

mousescrollstep - 滾動(dòng)鼠標(biāo)滾輪的速度，默認(rèn)值是40（像素）

touchbehavior - 讓滾動(dòng)條能拖動(dòng)滾動(dòng)觸摸設(shè)備默認(rèn)為false

hwacceleration - 使用硬件加速滾動(dòng)支持時(shí)，默認(rèn)為true

boxzoom - 使變焦框的內(nèi)容，默認(rèn)為false

dblclickzoom - （僅當(dāng)boxzoom = TRUE）變焦啟動(dòng)時(shí)，雙點(diǎn)擊框，默認(rèn)為true

gesturezoom - boxzoom = true并使用觸摸設(shè)備）變焦（僅當(dāng)激活時(shí)，間距/盒，默認(rèn)為true

grabcursorenabled“搶”圖標(biāo)，顯示div的touchbehavior = true時(shí)，默認(rèn)值是true

autohidemode，如何隱藏滾動(dòng)條的作品，真正的默認(rèn)/“光標(biāo)”=只光標(biāo)隱藏/ FALSE =不隱藏

的背景下，改變鐵路背景的CSS，默認(rèn)值為“”

iframeautoresize中，AUTORESIZE iframe上的load事件（默認(rèn)：true）

cursorminheight，設(shè)置最低滾動(dòng)條高度（默認(rèn)值：20）

preservenativescrolling，您可以用鼠標(biāo)滾動(dòng)本地滾動(dòng)的區(qū)域，鼓泡鼠標(biāo)滾輪事件（默認(rèn)：true）

railoffset，您可以添加抵消頂部/左軌位置（默認(rèn)：false）

bouncescroll，使?jié)L動(dòng)反彈結(jié)束時(shí)的內(nèi)容移動(dòng)（僅硬件ACCELL）（默認(rèn)：FALSE）

spacebarenabled，允許使用空格鍵滾動(dòng)（默認(rèn)：true）

railpadding，設(shè)置間距（默認(rèn)：頂：0，右：0，左：0，底部：0}）

disableoutline，Chrome瀏覽器，禁用綱要（橙色hightlight）時(shí)，選擇一個(gè)div nicescroll（默認(rèn)：true）

JS或者Jquery如何取得橫向和縱向滾動(dòng)條的最大可以滾動(dòng)的值？

需要準(zhǔn)備的材料分別有：電腦、html編輯器、瀏覽器。

1、首先，打開html編輯器，新建html文件，例如：index.html，并引入jquery。

2、在index.html中的script標(biāo)簽，輸入jquery代碼：

$('body').append('height: ' + $(document).height() + 'br/');

$('body').append('width: ' + $(document).width());

3、瀏覽器運(yùn)行index.html頁(yè)面，此時(shí)會(huì)打印出界面最大可以滾動(dòng)的文檔寬度和文檔高度。

如何獲取滾動(dòng)條的高度 jquery

獲取瀏覽器顯示區(qū)域的高度 ： $(window).height();

獲取瀏覽器顯示區(qū)域的寬度 ：$(window).width();

獲取頁(yè)面的文檔高度 ：$(document).height();

獲取頁(yè)面的文檔寬度 ：$(document).width();

獲取滾動(dòng)條到頂部的垂直高度 ：$(document).scrollTop();

獲取滾動(dòng)條到左邊的垂直寬度 ：$(document).scrollLeft();

計(jì)算元素位置和偏移量：$(id).offset();

offset方法是一個(gè)很有用的方法，它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含 top和left兩個(gè)屬性。

offset(options, results)

options.relativeTo指定相對(duì)計(jì)

算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。

options.scroll是否把

滾動(dòng)條計(jì)算在內(nèi)，默認(rèn)TRUE

options.padding是否把padding計(jì)算在內(nèi)，默認(rèn)false

options.margin

是否把margin計(jì)算在內(nèi)，默認(rèn)true

options.border是否把邊框計(jì)算在內(nèi)，默認(rèn)true

子頁(yè)面控制父頁(yè)面：

parent.document.documentElement.scrollTop;

parent.document.documentElement.clientHeight;

jquery如何讓滾動(dòng)條默認(rèn)在最底部？

使用如下代碼可讓滾動(dòng)條默認(rèn)在最底部：

$(document).ready(function(){

$("#submit").click(function(){

$("#info").append("admin:"+$("#talk").val()+"\n");

$("#info").scrollTop($("#info")[0].scrollHeight);

$("#talk").val("");

});

});

jQuery 里和滾動(dòng)條有關(guān)的概念很多，但是有三個(gè)屬性和滾動(dòng)條的拖動(dòng)有關(guān)，就是：scrollTop、scrollLeft、scrollHeight。

1、可見高度：viewHeight,可以理解為打開見瀏覽器空白頁(yè)見到的空白區(qū)域的高度。

2、內(nèi)容高度：containHeight,這個(gè)就是我們關(guān)心的高度，它是內(nèi)容的總高度，包括隱藏在滾動(dòng)條下面的內(nèi)容。

3、滾動(dòng)的高度：scrollHeight,這個(gè)是滾動(dòng)的高度，它是滾動(dòng)條滾動(dòng)了多少的意思。

代碼解說：

nScrollTop + nDivHight = nScrollHight。

程序中，在外部div的scroll（滾動(dòng)）事件中偵測(cè)和執(zhí)行if判斷語句，是非常消耗CPU資源的。用鼠標(biāo)拖拉滾動(dòng)條，只要有一個(gè)像素的變動(dòng)就會(huì)觸發(fā)該事件。但點(diǎn)擊滾動(dòng)條兩頭的箭頭，事件觸發(fā)的頻率會(huì)低得多。所以滾動(dòng)條的scroll事件要謹(jǐn)慎使用。

jquery滾動(dòng)條在指定高度滾動(dòng)

這個(gè)是兼容的

我公司的項(xiàng)目就用的這個(gè)獲取的。

function

ScollPostion()

{//滾動(dòng)條位置

var

t,

l,

w,

h;

if

(document.documentElement

document.documentElement.scrollTop)

{

t

=

document.documentElement.scrollTop;

l

=

document.documentElement.scrollLeft;

w

=

document.documentElement.scrollWidth;

h

=

document.documentElement.scrollHeight;

}

else

if

(document.body)

{

t

=

document.body.scrollTop;

l

=

document.body.scrollLeft;

w

=

document.body.scrollWidth;

h

=

document.body.scrollHeight;

}

return

{

top:

t,

left:

l,

width:

w,

height:

h

};

}

jquery如何獲取元素的滾動(dòng)條高度等實(shí)現(xiàn)代碼

主要功能：

獲取瀏覽器顯示區(qū)域（可視區(qū)域）的高度

：

$(window).height();

獲取瀏覽器顯示區(qū)域（可視區(qū)域）的寬度

：

$(window).width();

獲取頁(yè)面的文檔高度

$(document).height();

獲取頁(yè)面的文檔寬度

：

$(document).width();

瀏覽器當(dāng)前窗口文檔body的高度：

$(document.body).height();

瀏覽器當(dāng)前窗口文檔body的寬度：

$(document.body).width();

獲取滾動(dòng)條到頂部的垂直高度

(即網(wǎng)頁(yè)被卷上去的高度)

$(document).scrollTop();

獲取滾動(dòng)條到左邊的垂直寬度

：

$(document).scrollLeft();

獲取或設(shè)置元素的寬度：

$(obj).width();

獲取或設(shè)置元素的高度：

$(obj).height();

某個(gè)元素的上邊界到body最頂部的距離：obj.offset().top;（在元素的包含元素不含滾動(dòng)條的情況下）

某個(gè)元素的左邊界到body最左邊的距離：obj.offset().left;（在元素的包含元素不含滾動(dòng)條的情況下）

返回當(dāng)前元素的上邊界到它的包含元素的上邊界的偏移量：obj.offset().top（在元素的包含元素含滾動(dòng)條的情況下）

返回當(dāng)前元素的左邊界到它的包含元素的左邊界的偏移量：obj.offset().left（在元素的包含元素含滾動(dòng)條的情況下）

//返回當(dāng)前頁(yè)面高度

function

pageHeight(){

if($.browser.msie){

return

document.compatMode

==

"CSS1Compat"?

document.documentElement.clientHeight

:

document.body.clientHeight;

}else{

return

self.innerHeight;

}

};

//返回當(dāng)前頁(yè)面寬度

function

pageWidth(){

if($.browser.msie){

return

document.compatMode

==

"CSS1Compat"?

document.documentElement.clientWidth

:

document.body.clientWidth;

}else{

return

self.innerWidth;

}

};

以下是其它網(wǎng)友的補(bǔ)充：

獲取瀏覽器顯示區(qū)域的高度

：

$(window).height();

獲取瀏覽器顯示區(qū)域的寬度

：$(window).width();

獲取頁(yè)面的文檔高度

：$(document).height();

獲取頁(yè)面的文檔寬度

：$(document).width();

獲取滾動(dòng)條到頂部的垂直高度

：$(document).scrollTop();

獲取滾動(dòng)條到左邊的垂直寬度

：$(document).scrollLeft();

計(jì)算元素位置和偏移量：$(id).offset();

offset方法是一個(gè)很有用的方法，它返回包裝集中第一個(gè)元素的偏移信息。默認(rèn)情況下是相對(duì)body的偏移信息。結(jié)果包含

top和left兩個(gè)屬性。

offset(options,

results)

options.relativeTo指定相對(duì)計(jì)

算偏移位置的祖先元素。這個(gè)元素應(yīng)該是relative或absolute定位。省略則相對(duì)body。

options.scroll是否把

滾動(dòng)條計(jì)算在內(nèi)，默認(rèn)TRUE

options.padding是否把padding計(jì)算在內(nèi)，默認(rèn)false

options.margin

是否把margin計(jì)算在內(nèi)，默認(rèn)true

options.border是否把邊框計(jì)算在內(nèi)，默認(rèn)true

子頁(yè)面控制父頁(yè)面：

parent.document.documentElement.scrollTop;

parent.document.documentElement.clientHeight;