JavaScript-JQ初探实现自定义滚动条
这是一个基本实现思路，如果有新手和我一样没什么事，喜欢瞎研究话，可以参考下。
一、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-JQ初探实现自定义滚动条的更多相关文章
- javascript 学习之自定义滚动条加滚轮事件
要自己写一个自定义滚动条加上滚轮事件,之前的没有滚轮事件不完整,今天整理了一个. 1.滚轮事件是不兼容的,firefox中是必需要用事件绑定的添加,用的DOMMouseScroll,当滚动鼠标的时候, ...
- javascript自定义滚动条插件，几行代码的事儿
在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...
- day52—JavaScript拖拽事件的应用（自定义滚动条）
转行学开发,代码100天——2018-05-07 前面的记录里展示了JavaScript中鼠标拖拽功能,今天利用拖拽功能实现另一个应用场景——自定义滚动条(作为控制器)的用法. 常通过自定义滚动条控制 ...
- Javascript和jquery事件--滚动条事件和自定义滚动条事件样式
很想把滚动条事件跟鼠标滚轮事件放在一起,那就直接写在这一篇了.除了事件以外,对滚动条样式的调整也记在这里吧. 滚动条是浏览器的默认事件,使用overflow:auto/scroll都有可能出现,它的默 ...
- 自定义滚动条 - mCustomScrollbar
项目中需要使用自定义滚动条,但是试用了很多都功能不够全,今天发现一个比较全而且用法很简单的 -- mCustomScrollbar http://manos.malihu.gr/jquery-cust ...
- jQuery自定义滚动条样式插件mCustomScrollbar
如果你构建一个很有特色和创意的网页,那么肯定希望定义网页中的滚动条样式,这方面的 jQuery 插件比较不错的,有两个:jScrollPane 和 mCustomScrollbar. 关于 jScro ...
- 自定义滚动条Js简版
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>自定义滚 ...
- CSS3_元素拖曳原理_设置全局点击捕获_九宫格碰撞检测_自定义滚动条
拖曳原理: 元素的初始位置 + 鼠标距离差 = 元素最终位置 使元素可以拖动 function dragElement(obj){ obj.onmousedown = function(e){ e = ...
- 自定义滚动条mCustomScrollbar
mCustomScrollbar 是个基于 jQuery UI 的自定义滚动条插件,它可以让你灵活的通过 CSS 定义网页的滚动条,并且垂直和水平两个方向的滚动条都可以定义,它通过 Brandon A ...
随机推荐
- 局域网下共享 MySQL 数据库连接
转载自:https://blog.csdn.net/larger5/article/details/96974554 一.前言 在使用公司的一些开发框架,需要特定的 MySQL 版本,还要做一些配置操 ...
- jmeter命令行压测
简介:使用非GUI模式,即命令行模式运行jmeter测试脚本能够大大缩减系统资源 1.配置jdk及添加环境变量 变量名:JAVA_HOME 变量值: C:\Program Files\Java\jdk ...
- MVVM基础概念和理解
在MVVM模式中,View封装UI和UI逻辑,viewmodel封装presentation逻辑,model封装业务逻辑和数据. View类 View的责任是定义屏幕上的结构和外观,在完美的情况下,v ...
- 如何将Map键值的下划线转为驼峰
本文不再更新,可能存在内容过时的情况,实时更新请移步我的新博客:如何将Map键值的下划线转为驼峰: 例,将HashMap实例extMap键值下划线转为驼峰: 代码: HashMap<String ...
- HZOI20190823 C magic
数论板子合集... 我们要求: $N^{\sum\limits_{i=1}^{N}[gcd(i,N)==1]C_{n}^{i}}mod p$ 其中p为54184622,是个合数 指数是组合数,不能用快 ...
- Laravel报错：1071 Specified key was too long; max key length is 1000 bytes
Laravel安装,初始化数据库,运行下列命令时候出错 php artisan migrate 解决办法1,设置数据库引擎格式 //临时更改 SET GLOBAL default_storage_en ...
- __autoreleasing 修饰符
将对象赋值给附有__autoreleasing 修饰符的变量等同于ARC 无效时调用对象的autorelease方法.我们通过以下源代码来看一下. @autoreleasepool { id __au ...
- VitualBox虚拟机安装CentOS， shell模式与图形化界面的相互切换
方法一:永久切换 # vi /etc/inittab 编辑 init 5 为 init 3,重启就自动进入控制台方式:反之桌面模式 方法二:当前有效 桌面模式切换shell模式:Ctrl + Alt ...
- Java中String类的常见面试题
1. 判断定义为String类型的s1和s2是否相等 String s1 = "ab"; String s2 = "abc"; String s3 = s1 + ...
- 使用Scrapyd部署Scrapy爬虫到远程服务器上
1.准备好爬虫程序 2.修改项目配置 找到项目配置文件scrapy.cnf,将里面注释掉的url解开来 本代码需要连接数据库,因此需要修改对应的数据库配置 其实就是将里面的数据库地址进行修改,变成远程 ...