网站建设资讯

NEWS

网站建设资讯

滚动条jquery,滚动条是什么

jquery.nicescroll.min.js滚动条使用方法

(摘自博客园,原网址)

西畴网站建设公司创新互联,西畴网站设计制作,有大型网站制作公司丰富经验。已为西畴上1000家提供企业网站建设服务。企业网站搭建\成都外贸网站建设要多少钱,请找那个售后服务好的西畴做网站的公司定做!

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)

jquery获取滚动条高度和位置

1、jquery获取滚动条高度使用.scrollTop()方法。

2、首先我们新建一个长篇的HTML文档。

3、然后我们编辑JS脚本,使用.scroll()方法,监听网页滚动。

4、然后我们使用.scrollTop()获取垂直滚动距离。

5、然后保存文件,查看获取的垂直滚动距离即可。

jQuery实现将div中滚动条滚动到指定位置的方法

本文实例讲述了jQuery实现将div中滚动条滚动到指定位置的方法。分享给大家供大家参考,具体如下:

一、Js代码:

onload

=

function

()

{

//初始化

scrollToLocation();

};

function

scrollToLocation()

{

var

mainContainer

=

$('#thisMainPanel'),

scrollToContainer

=

mainContainer.find('.son-panel:last');//滚动到div

id="thisMainPanel"中类名为son-panel的最后一个div处

//scrollToContainer

=

mainContainer.find('.son-panel:eq(5)');//滚动到div

id="thisMainPanel"中类名为son-panel的第六个处

//非动画效果

//mainContainer.scrollTop(

//

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

//);

//动画效果

mainContainer.animate({

scrollTop:

scrollToContainer.offset().top

-

mainContainer.offset().top

+

mainContainer.scrollTop()

},

2000);//2秒滑动到指定位置

}

二、Html代码:

div

id="thisMainPanel"

style="height:200px;overflow-y:

scroll;border:1px

solid

#f3f3f3;"

div

class="son-panel"我是类容区域-1/div

div

class="son-panel"我是类容区域-2/div

div

class="son-panel"我是类容区域-3/div

div

class="son-panel"我是类容区域-4/div

div

class="son-panel"

style="height:160px;"我是类容区域-5/div

div

class="son-panel"我是类容区域-6/div

div

class="son-panel"我是类容区域-7/div

div

class="son-panel"我是类容区域-8/div

/div

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》、《jQuery

form操作技巧汇总》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。


当前标题:滚动条jquery,滚动条是什么
文章路径:http://njwzjz.com/article/dsijedh.html