jquery的滚动条,jquery滑动条

jquery获取滚动条高度和位置

1、首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。

成都创新互联公司一直通过网站建设和网站营销帮助企业获得更多客户资源。 以"深度挖掘，量身打造，注重实效"的一站式服务，以成都做网站、网站制作、移动互联产品、营销型网站建设服务为核心业务。十多年网站制作的经验，使用新网站建设技术，全新开发出的标准网站，不但价格便宜而且实用、灵活，特别适合中小公司网站制作。网站管理系统简单易用，维护方便，您可以完全操作网站资料，是中小公司快速网站建设的选择。

2、然后在上方引入jQuery的脚本，编辑js脚本，使用bind方法绑定浏览器的scroll事件，监听网页滚动，之后用scrollTop()获取垂直滚动距离，最后弹出输出的值即可。

3、保存一下打开浏览器，可以看到一个长篇的文档。

4、按F12打开浏览器开发者工具，切换到Console标签下，滚动鼠标，就可以在开发者工具里显示出浏览器高度位置的数据了。

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.nicescroll.min.js滚动条使用方法

(摘自博客园，原网址)

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将DIV的滚动条滚动到指定的位置

1、假设首先有一个div，内容区域超出了这个div，出现了竖向滚动条

2、$('div').scrollTop(number);//用jquery的scrollTop方法，传入的参数是你想设置的滚动条滚动的距离，也就是滚动条距离顶部的距离，就可以了。

3、如果是想有动画，那可以用jquery的animate函数，设置scrollTop属性，设置时间就好了

jquery如何让滚动条默认在最底部？

使用如下代码可让滚动条默认在最底部：

$(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事件要谨慎使用。