JavaScript学习笔记-自定义滚动条
这是一个基本实现思路，如果有新手和我一样没什么事，喜欢瞎研究话，可以参考下。
一、Html
<div class="scroll_con">
<div class="scroll_text">
这里是你的需要显示在滚动条框内文本内容......
</div>
</div>
二、Css
/*这里是让用户鼠标在里面不能选中文字，避免拖动的时候出错*/
body { -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期浏览器*/ user-select: none; } * { margin:; padding:; border:; } /*滚动文本及滚动条大框*/
.scroll_con { width: 500px; height: 500px; background-color: #5c0af7; position: relative; overflow-y: hidden; } /*滚动文本*/
.scroll_text { width: 480px; font-size: 14px; word-break:break-word; color: #ffffff; position: absolute; left:; top:; } /*滚动条整体框*/
.scroll { height: 500px; background-color: #2e03c4; position: absolute; left: 486px; top:; }
.scroll，.scroll .scroll_cen, .scroll .scroll_up, .scroll .scroll_down { width: 14px; }
/*滚轮上下按钮*/
.scroll .scroll_up, .scroll .scroll_down { height: 20px; line-height: 20px; background-color: #7263f8; color: #ffffff; font-size: 14px; font-weight: bold; text-align: center; }
.scroll .scroll_up:hover, .scroll .scroll_down:hover { background-color: #9da2f8; cursor: pointer; }
/*滚动滚动轨道*/
.scroll .scroll_cen { height: 460px; background-color: #2e03c4; position: relative; }
.scroll .scroll_cen .scroll_button { width: 12px; margin: 0px 1px; background-color: #7263f8; border-radius: 5px; position: absolute; cursor: pointer; }
三、JavaScript
$(function () {
//添加滚动条
scrollHTML = "";
scrollHTML += "<div class='scroll_up'>∧</div>"; //上微调按钮
scrollHTML += "<div class='scroll_cen'><div class='scroll_button'></div></div>"; //中间轨道层即内滑动按钮
scrollHTML += "<div class='scroll_down'>∨</div>"; //下微调按钮
$(".scroll_con").append("<div class='scroll'> " + scrollHTML + "</div>"); //在HTML中输出滚动条整体
var text_hidden = $(".scroll_con").height(); //文本内容显示高度
var text_show = $(".scroll_text").height(); //文本内容实际高度
var scroll_b = $(".scroll_button"); //获取滚动按钮
var text_p = text_hidden / text_show; //计算显示内容占实际内容的多少
var bH_max = 460; //定义滚动按钮最大显示长度
var bH = text_p * bH_max; //定义滚动按钮长度随文本实际内容成正比改变
if (text_p >= 1) { //判断当文本没有超出显示框时
$(".scroll").css("display", "none"); //滚动条不显示
} else { //否则
$(".scroll").css("display", "block"); //显示滚动条
scroll_b.css("height", bH + "px"); //且按钮长度为随正比改变的值
}
//鼠标拖动div事件
var needMove = false, //是否需要拖动
mouseY = 0; //清空当前鼠标指针坐标
scroll_b.mousedown(function (event) { //当鼠标按下时
needMove = true; //需要滑动
var bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
mouseY = event.pageY - bH_Top; //计算此时的鼠标指针坐标
});
$(document).mouseup(function (event) { //当鼠标离开时
needMove = false; //不需要滑动
});
$(document).mousemove(function (event) { //当鼠标移动时
if (needMove) {//如果为需要滑动
var sMouseY = event.pageY; //获取鼠标移动后在页面的当前坐标
var bH_Top = sMouseY - mouseY; //计算滚动按钮此时的top
var textY = bH_Top / bH_max * text_show; //根据前面计算出的占比计算文本此时应该显示的坐标
if (bH_Top <= 0) { //如果此时滚动按钮的top<0
scroll_b.css("top", 0);
$(".scroll_text").css("top", 0);
return;
}
if (bH_Top >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
scroll_b.css("top", bH_max - bH);
$(".scroll_text").css("top", text_hidden - text_show);
return;
}
scroll_b.css("top", bH_Top);
$(".scroll_text").css("top", -textY);
}
return;
});
//上微调按钮点击事件
var goThread = "";
$(".scroll_up").mouseup(function () {
clearInterval(goThread);
})
$(".scroll_up").mousedown(function () {
clearInterval(goThread);
goThread = setInterval(function () {
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
scroll_b.css("top", 0);
$(".scroll_text").css("top", 0);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top - h);
$(".scroll_text").css("top", -textY);
}, 300);
});
$(".scroll_up").click(function () {
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
scroll_b.css("top", 0);
$(".scroll_text").css("top", 0);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top - h);
$(".scroll_text").css("top", -textY);
});
//下微调按钮点击事件
$(".scroll_down").mouseup(function () {
clearInterval(goThread);
})
$(".scroll_down").mousedown(function () {
clearInterval(goThread);
goThread = setInterval(function () {
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Downing = bH_Top + h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
scroll_b.css("top", bH_max - bH);
$(".scroll_text").css("top", text_hidden - text_show);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top + h);
$(".scroll_text").css("top", -textY);
}, 300);
});
$(".scroll_down").click(function () {
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Downing = bH_Top + h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
scroll_b.css("top", bH_max - bH);
$(".scroll_text").css("top", text_hidden - text_show);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top + h);
$(".scroll_text").css("top", -textY);
});
//滚轮事件（这里调用了一个插件jQuery Mousewheel）
$(".scroll_con").bind("mousewheel", function (event, delta, deltaX, deltaY) {
if (delta==1) { //滚动向上滚动时
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Toping = bH_Top - h;
if (bH_Top <= 0 || Toping <= 0) { //如果此时滚动按钮的top<0
scroll_b.css("top", 0);
$(".scroll_text").css("top", 0);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top - h);
$(".scroll_text").css("top", -textY);
}
if (delta == -1) { //滚动向下滚动时
bH_Top = scroll_b.position().top; //获取鼠标按下时滚动按钮的top
var h = 0;
h += 5;
var Downing = bH_Top + h;
if (bH_Top >= bH_max - bH || Downing >= bH_max - bH) { //如果此时滚动按钮的top>=滚动按钮可滚动的最大范围
scroll_b.css("top", bH_max - bH);
$(".scroll_text").css("top", text_hidden - text_show);
return;
}
var textY = bH_Top / bH_max * text_show;
scroll_b.css("top", bH_Top + h);
$(".scroll_text").css("top", -textY);
}
return;
});
})
四、OK，这样就搞定一个自定义的滚动条了，最后总结下，将复用的方法整合，优化下代码。封装成一个方法就完成啦！
JavaScript学习笔记-自定义滚动条的更多相关文章
- JavaScript学习笔记- 自定义滚动条插件
此滚动条仅支持竖向(Y轴) 一.Css /*这里是让用户鼠标在里面不能选中文字,避免拖动的时候出错*/ body { -moz-user-select: none; /*火狐*/ -webkit-us ...
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
- JavaScript学习笔记-自定义集合类
//集合类Set( ES6标准才有的类,目前兼容性较差)//自定义集合类:extend = function (o,p){ //定义一个复制对象属性的类函数 for(var x in p){ o[x] ...
- JavaScript:学习笔记(2)——基本概念与数据类型
JavaScript:学习笔记(2)——基本概念与数据类型 语法 1．区分大小写．Test 和 test 是完全不同的两个变量. 2．语句最好以分号结束,也就是说不以分号结束也可以． 变量 1.JS的 ...
- Java程序猿的JavaScript学习笔记（汇总文件夹）
最终完结了,历时半个月. 内容包含: JavaScript面向对象特性分析,JavaScript高手必经之路. jQuery源代码级解析. jQuery EasyUI源代码级解析. Java程序猿的J ...
- Java程序猿的JavaScript学习笔记（8——jQuery选择器）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（2——复制和继承财产）
计划和完成在这个例子中,音符的以下序列: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaSc ...
- Java程序猿的JavaScript学习笔记（3——this/call/apply）
计划按例如以下顺序完毕这篇笔记: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScript ...
- Java程序猿JavaScript学习笔记（4——关闭/getter/setter）
计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...
随机推荐
- oracle存储过程--导出数据库表的说明文档
Oracle查询表的名字和comments select a.table_name,b.comments from user_tables a,ALL_TAB_COMMENTS b where a.t ...
- html页面高亮关键词
function hightLightTheKeyWord(searchParam,$dom){ if(searchParam&&!/^\s*$/.test(searchParam)) ...
- linux中send函数MSG_NOSIGNAL异常消息
最近2周在做ineedle的国舜项目扩展,需要使用socket的tcp连接向对方发送消息,当然需求很简单,只是按照对方要求发送指定格式的消息,程序结构也非常的简单,一对多的client/server模 ...
- ab.exe使用
ab.exe是一个性能检测工具,是apache server中的一个小组件,使用简单,方便 下载地址:http://files.cnblogs.com/files/gossip/ab.zi ...
- discuz mysqli_connect() 不支持 advice_mysqli_connect
看网友的解决方案是:下面2行去掉注释 ? 1 2 ;extension=php_mysql.dll ;extension=php_mysqli.dl 尝试修改 ? 1 #vi /etc/php.i ...
- Linux命令整理中...
Linux命令整理中... 最常用命令(我最近最常用的一般放在前面tipsbychsry) clear 清屏 date 显示日期 cal 显示日历 cal 2014 显示2014年的日历 shutdo ...
- Redhat Linux 修改主机名（HOSTNAME）
hostname #查看当前主机的主机名hostname NEWHOSTNAME #临时修改当前主机名 修改主机名vi /etc/sysconfig/network #通过配置文件修改主机名NETWO ...
- 微信小程序开发初体验--教你开发小程序
微信小程序 微信小程序面世以来受到的关注颇多,直到最近我才动手尝试进行了小程序的开发,总体上感觉还是不错的,有一点不适应的就是要摆脱Web APP开发对DOM的操作.在这里我就把我是如何利用API开发 ...
- 编写NPAPI plugin的命名问题
最近写了个NPAPI的插件,在chrome上用得好好的,结果在火狐上死活不认我的插件,找了N多资料最后在官方的说明里才找到说火狐浏览器的插件的文件名必须是以np开头的,立刻吐血三升,难怪被chrome ...
- css3中变形与动画（三）
transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...