扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
(摘自博客园,原网址)
创新互联是一家专注于网站设计、成都网站设计与策划设计,昌都网站建设哪家好?创新互联做网站,专注于网站建设10多年,网设计领域的专业建站公司;建站业务涵盖:昌都等地区。昌都做网站价格咨询:13518219792
jquery.nicescroll.min.js滚动条使用方法,Nicescroll是制作自定义滚动条的jq插件。支持div,iframe,html等使用,兼容IE7-8,safari,firefox,webkit内核浏览器(chrome,safari)以及智能终端设备浏览器的滚动条。
页面使用:
$("html").niceScroll({
cursorcolor:"#E62020",
cursoropacitymax:1,
touchbehavior:false,
cursorwidth:"10px",
cursorborder:"0",
cursorborderradius:"5px"
})
nicescroll详细参数配置:
cursorcolor - 设置滚动条颜色,默认值是“#000000”
cursoropacitymin - 滚动条透明度最小值
cursoropacitymax - 滚动条透明度最大值
cursorwidth - 滚动条的宽度像素,默认为5(你可以写“5PX”)
cursorborder - CSS定义边框,默认为“1px solid #FFF”
cursorborderradius - 滚动条的边框圆角
ZIndex的 - 改变滚动条的DIV的z-index值,默认值是9999
scrollspeed - 滚动速度,默认值是60
mousescrollstep - 滚动鼠标滚轮的速度,默认值是40(像素)
touchbehavior - 让滚动条能拖动滚动触摸设备默认为false
hwacceleration - 使用硬件加速滚动支持时,默认为true
boxzoom - 使变焦框的内容,默认为false
dblclickzoom - (仅当boxzoom = TRUE)变焦启动时,双点击框,默认为true
gesturezoom - boxzoom = true并使用触摸设备)变焦(仅当激活时,间距/盒,默认为true
grabcursorenabled“抢”图标,显示div的touchbehavior = true时,默认值是true
autohidemode,如何隐藏滚动条的作品,真正的默认/“光标”=只光标隐藏/ FALSE =不隐藏
的背景下,改变铁路背景的CSS,默认值为“”
iframeautoresize中,AUTORESIZE iframe上的load事件(默认:true)
cursorminheight,设置最低滚动条高度(默认值:20)
preservenativescrolling,您可以用鼠标滚动本地滚动的区域,鼓泡鼠标滚轮事件(默认:true)
railoffset,您可以添加抵消顶部/左轨位置(默认:false)
bouncescroll,使滚动反弹结束时的内容移动(仅硬件ACCELL)(默认:FALSE)
spacebarenabled,允许使用空格键滚动(默认:true)
railpadding,设置间距(默认:顶:0,右:0,左:0,底部:0})
disableoutline,Chrome浏览器,禁用纲要(橙色hightlight)时,选择一个div nicescroll(默认:true)
需要准备的材料分别有:电脑、html编辑器、浏览器。
1、首先,打开html编辑器,新建html文件,例如:index.html,并引入jquery。
2、在index.html中的script标签,输入jquery代码:
$('body').append('height: ' + $(document).height() + 'br/');
$('body').append('width: ' + $(document).width());
3、浏览器运行index.html页面,此时会打印出界面最大可以滚动的文档宽度和文档高度。
获取浏览器显示区域的高度 : $(window).height();
获取浏览器显示区域的宽度 :$(window).width();
获取页面的文档高度 :$(document).height();
获取页面的文档宽度 :$(document).width();
获取滚动条到顶部的垂直高度 :$(document).scrollTop();
获取滚动条到左边的垂直宽度 :$(document).scrollLeft();
计算元素位置和偏移量:$(id).offset();
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含 top和left两个属性。
offset(options, results)
options.relativeTo指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll是否把
滚动条计算在内,默认TRUE
options.padding是否把padding计算在内,默认false
options.margin
是否把margin计算在内,默认true
options.border是否把边框计算在内,默认true
子页面控制父页面:
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;
使用如下代码可让滚动条默认在最底部:
$(document).ready(function(){
$("#submit").click(function(){
$("#info").append("admin:"+$("#talk").val()+"\n");
$("#info").scrollTop($("#info")[0].scrollHeight);
$("#talk").val("");
});
});
jQuery 里和滚动条有关的概念很多,但是有三个属性和滚动条的拖动有关,就是:scrollTop、scrollLeft、scrollHeight。
1、可见高度:viewHeight,可以理解为打开见浏览器空白页见到的空白区域的高度。
2、内容高度:containHeight,这个就是我们关心的高度,它是内容的总高度,包括隐藏在滚动条下面的内容。
3、滚动的高度:scrollHeight,这个是滚动的高度,它是滚动条滚动了多少的意思。
代码解说:
nScrollTop + nDivHight = nScrollHight。
程序中,在外部div的scroll(滚动)事件中侦测和执行if判断语句,是非常消耗CPU资源的。用鼠标拖拉滚动条,只要有一个像素的变动就会触发该事件。但点击滚动条两头的箭头,事件触发的频率会低得多。所以滚动条的scroll事件要谨慎使用。
这个是兼容的
我公司的项目就用的这个获取的。
function
ScollPostion()
{//滚动条位置
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
};
}
主要功能:
获取浏览器显示区域(可视区域)的高度
:
$(window).height();
获取浏览器显示区域(可视区域)的宽度
:
$(window).width();
获取页面的文档高度
$(document).height();
获取页面的文档宽度
:
$(document).width();
浏览器当前窗口文档body的高度:
$(document.body).height();
浏览器当前窗口文档body的宽度:
$(document.body).width();
获取滚动条到顶部的垂直高度
(即网页被卷上去的高度)
$(document).scrollTop();
获取滚动条到左边的垂直宽度
:
$(document).scrollLeft();
获取或设置元素的宽度:
$(obj).width();
获取或设置元素的高度:
$(obj).height();
某个元素的上边界到body最顶部的距离:obj.offset().top;(在元素的包含元素不含滚动条的情况下)
某个元素的左边界到body最左边的距离:obj.offset().left;(在元素的包含元素不含滚动条的情况下)
返回当前元素的上边界到它的包含元素的上边界的偏移量:obj.offset().top(在元素的包含元素含滚动条的情况下)
返回当前元素的左边界到它的包含元素的左边界的偏移量:obj.offset().left(在元素的包含元素含滚动条的情况下)
//返回当前页面高度
function
pageHeight(){
if($.browser.msie){
return
document.compatMode
==
"CSS1Compat"?
document.documentElement.clientHeight
:
document.body.clientHeight;
}else{
return
self.innerHeight;
}
};
//返回当前页面宽度
function
pageWidth(){
if($.browser.msie){
return
document.compatMode
==
"CSS1Compat"?
document.documentElement.clientWidth
:
document.body.clientWidth;
}else{
return
self.innerWidth;
}
};
以下是其它网友的补充:
获取浏览器显示区域的高度
:
$(window).height();
获取浏览器显示区域的宽度
:$(window).width();
获取页面的文档高度
:$(document).height();
获取页面的文档宽度
:$(document).width();
获取滚动条到顶部的垂直高度
:$(document).scrollTop();
获取滚动条到左边的垂直宽度
:$(document).scrollLeft();
计算元素位置和偏移量:$(id).offset();
offset方法是一个很有用的方法,它返回包装集中第一个元素的偏移信息。默认情况下是相对body的偏移信息。结果包含
top和left两个属性。
offset(options,
results)
options.relativeTo指定相对计
算偏移位置的祖先元素。这个元素应该是relative或absolute定位。省略则相对body。
options.scroll是否把
滚动条计算在内,默认TRUE
options.padding是否把padding计算在内,默认false
options.margin
是否把margin计算在内,默认true
options.border是否把边框计算在内,默认true
子页面控制父页面:
parent.document.documentElement.scrollTop;
parent.document.documentElement.clientHeight;
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流