189 8069 5689
(摘自博客园，原网址)
创新互联建站是专业的宁县网站建设公司，宁县接单;提供成都做网站、成都网站建设,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行宁县网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!
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的scrollTop函数进行滚动控制:
举个栗子:
!DOCTYPE html
html lang="en"
head
meta charset="UTF-8"
meta name="author" content="sleest"
meta name="description" content="2017/08/07 jQuery scrollTop example" /
titleDocument/title
/head
body
div style="background: #bdbdbd;height:400px;width:300px;overflow:auto;" id="container"
div id="content-1" style="height: 200px;background-color:#03a9f4;color:#fff"Height.200px/div
div id="content-2" style="height: 300px;background-color:#ffc107;color:#fff"Height.300px/div
div id="content-3" style="height: 150px;background-color:#E91E63;color:#fff"Height.150px/div
/div
div style="margin-top:20px"
labelPixel Scroll:/label
input type="number" value="0" id="scrollPixel" step="50" /
button type="button" id="btn-scroll-to"Scroll/button
/div
div style="margin-top:20px"
labelElement Scroll:/label
select id="scrollElement"
option value="" selected-- choose element 2 scorll/option
option value="#content-1"Content1, Height 200px/option
option value="#content-2"Content2, Height 300px/option
option value="#content-3"Content3, Height 150px/option
/select
/div
script src=""/script
script type="text/javascript"
+(function($) {
var $scrollPixel = $('#scrollPixel'),
$container = $('#container');
function scrollPixel() {
$container.scrollTop(+$scrollPixel.val());
}
function scrollElement() {
var $t = $(this),
elId = $t.val();
if (elId) $container.scrollTop($(elId)[0].offsetTop - $container[0].offsetTop);
}
$(function() {
$('#btn-scroll-to').bind('click', scrollPixel)
$('#scrollElement').bind('change', scrollElement)
})
})(jQuery);
/script
/body
/html
本文实例讲述了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程序设计有所帮助。
1、jquery获取滚动条高度使用.scrollTop()方法。
2、首先我们新建一个长篇的HTML文档。
3、然后我们编辑JS脚本，使用.scroll()方法，监听网页滚动。
4、然后我们使用.scrollTop()获取垂直滚动距离。
5、然后保存文件，查看获取的垂直滚动距离即可。