javascript滚动条之ScrollBar.js
ScrollBar.js是一个仅仅120行的滚动条JS插件,使用非常方便
详情阅读:https://git.oschina.net/wuquanyao/scrollbar.js
/*=================================
* ScrollBar.js beta
* Author:wuquanyao
* Email:wqynqa@163.com
*=================================*/
var ScrollBar = {};
(function(ScrollBar){
var parent,root,track,bar,tx,ch,h,sh,rate;
ScrollBar.adapter = function(config)
{
init(config);
}
function init(config)
{
parent = document.querySelector(config['selector']);
root = parent.parentNode;
createBar();
mouseaction();
}
function createBar()
{
track = document.createElement('div');
track.setAttribute('class','scroll-track');
bar = document.createElement('div');
bar.setAttribute('class','scroll-bar');
track.appendChild(bar);
root.appendChild(track);
sh = root.scrollHeight;
ch = root.offsetHeight;
tx = root.offsetTop;
h = ch/sh*ch;
if(h<30){
bar.style.height = '30px';
h = 30;
}else{
bar.style.height = h+'px';
}
rate = (sh-ch)/(ch-h);
}
function mouseaction()
{
function eventparse(obj,type,func){
if(document.attachEvent){
var events = {
click:'onclick',
mouseover:'onmouseover',
mousemove:'onmousemove',
mouseout:'onmouseout',
mousedown:'onmousedown',
mouseup:'onmouseup',
wheel:'DOMMouseScroll'
};
obj.attachEvent(events[type],func);
}else{
var events = {
click:'click',
mouseover:'mouseover',
mousemove:'mousemove',
mouseout:'mouseout',
mousedown:'mousedown',
mouseup:'mouseup',
wheel:'DOMMouseScroll'
};
obj.addEventListener(events[type],func,false);
}
}
function init(){
var bool = false,v;
eventparse(bar,'mousedown',function(event){
bool = true;
});
eventparse(document,'mousemove',function(event){
if(bool){
if(event.clientY<=(tx+10)){
v = 0;
}else if(event.clientY>=(tx+ch-h)){
v = tx+ch-h;
}else{
v = event.clientY;
}
parent.style.transform = 'translate(0px,'+(-v*rate)+'px)';
bar.style.transform = 'translateY('+v+'px)';
}
});
eventparse(document,'mouseup',function(event){
bool = false;
});
// eventparse(track,'click',function(event){
// event.stopPropagation();
// bar.style.transition = 'all 0ms ease 0ms';
// if(event.clientY<(tx+h)){
// bar.style.transform = 'translate(0px,0px)';
// }else if(event.clientY>=(tx+ch-h)){
// bar.style.transform = 'translate(0px,'+(tx+ch-h)+'px)';
// }else{
// bar.style.transform = 'translate(0px,'+(event.clientY-h/2)+'px)';
// }
// parent.style.transform = 'translate(0px,'+((-event.clientY+tx)*rate)+'px)';
// });
var offset=0;
if (window.navigator.userAgent.indexOf("Firefox") >= 0) {
eventparse(parent,'wheel',wheelEvent);
}else{
parent.onmousewheel=parent.onmousewheel=wheelEvent;
}
function wheelEvent(e){
var transform,bO,wv = (e.detail/3*20) || (-(e.wheelDelta/120*20));
if((offset<(sh-ch) &&(offset>=0))){
transform = 'translate(0px,'+(-offset)+'px)';
bO = 'translateY('+(offset/rate)+'px)';
offset = ((offset+wv)>(sh-ch))?offset:( ((offset+wv)<=0)?0:(offset+wv) );
}
bar.style.transform = bO;
parent.style.transform = transform;
}
}
init();
}
})(ScrollBar);
javascript滚动条之ScrollBar.js的更多相关文章
- 【JavaScript】使用纯JS实现多张图片的懒加载(附源码)
一.效果图如下 上面的效果图,效果需求如下 1.还没加载图片的时候,默认显示加载图片背景图 2.刚开始进入页面,自动加载第一屏幕的图片 3.下拉界面,当一张图片容器完全显露出屏幕,即刻加载图片,替换背 ...
- 初探JavaScript(三)——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 初探JavaScript(二)——JS如何动态操控HTML
除去五一三天,我已经和<JavaScript Dom编程艺术>磨合了六天,第一印象很好.慢慢的,我发现这是一块排骨,除了肉还有骨头.遇到不解的地方就会多看几遍,实在不懂的先跳过,毕竟,初次 ...
- 强大的JavaScript动画图形库mo.js
最近在学习前端动画方面知识时发现了挺有趣的一个动画的图形库mo.js,页面效果真是酷炫,有兴趣的同学可以研究下:). 酷炫的效果: 以下是官方的demo效果,更多详情请查看 mo.js http:// ...
- 省市县 三级 四级联动Javascript JQ 插件PCASClass.js
想要使用这款组件,需要页面引入 PCASClass.js 核心文件,该文件在您的HTML文档<head>标签之内. <script type="text/javascrip ...
- 【转】《高级前端3.6》JavaScript多线程——Concurrent.Thread.js, WebWork
原文链接:http://www.cnblogs.com/woodk/articles/5199536.html JavaScript多线程,在HTML5 WebWork没出现之前很多人都是用Concu ...
- JavaScript模板引擎Template.js使用详解
这篇文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 template.js 一款 JavaScript 模板引 ...
- 坑人的 Javascript 模块化编程 require.js
坑人的 Javascript 模块化编程 require.js
- 坑人的 Javascript 模块化编程 sea.js
坑人的 Javascript 模块化编程 sea.js 忧伤 加 蛋疼的 开始了 看文档 Sea.js 进行配置 seajs.config({ // 设置路径,方便跨目录调用 paths: { 'ar ...
随机推荐
- [CareerCup] 6.5 Drop Eggs 扔鸡蛋问题
6.5 There is a building of 100 floors. If an egg drops from the Nth floor or above, it will break. I ...
- 20135335郝爽 & 20135304刘世鹏 实验一
北京电子科技学院(BESTI) 实 验 报 告 课程: 密码系统设计基础 ...
- 详解 ManualResetEvent
今天详细说一下ManualResetEvent 它可以通知一个或多个正在等待的线程已发生事件,允许线程通过发信号互相通信,来控制线程是否可心访问资源 当一个线程开始一个活动(此活动必须完成后,其他线程 ...
- STM32的USB速度,终于确定了传输极限,为以后的产品设计提供了数据。
是自定协议,用到一个bulk in ep1, 一个bulk out ep2 端点 用虚拟串口的优点显而易见,上位机的编写非常方便,就按照常规的串口功能编写就可以了,而速度确还是usb的速度 USB ...
- angular(常识)
我觉得angularjs是前端框架,而jquery只是前端工具,这两个还是没有可比性的. 看知乎上关于jquery和angular的对比http://www.zhihu.com/question/27 ...
- 每天一个linux命令(36):top命令
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是 一个动态显示过程,即可以通过用户按键来不断刷 ...
- java操作excel总结---poi
前不久做过Excel的导入导出功能,其主要的难点是java如何操作Excel文档.现在就来介绍一下利用Apache的poi如何操作Excel. 1.准备工作:导入Apache POI的相关jar包,P ...
- Qt无边框,可移动窗口
QPoint dragPosition; void MainWindow::mousePressEvent(QMouseEvent *event) { if(event->button()==Q ...
- formData_html5_map标签
1 : //更省事 var files = fileInput.files; var formData = new FormData(); //将所有文件插入formData formData .ap ...
- JS:采摘自JS精粹
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...