js原生封装自定义滚动条
/*
* @Author: dothin前端
* @Date: 2015-11-21 00:12:15
* @Last Modified by: dothin前端
* @Last Modified time: 2015-11-21 00:29:12
*/
! function() {
var EventUtil = {
addHandler: function(obj, type, handler) {
if (obj.addEventListener) {
obj.addEventListener(type, handler, false);
} else if (obj.attachEvent) {
obj.attachEvent("on" + type, handler);
} else {
obj["on" + type] = handler;
}
},
removeHandler: function(obj, type, handler) {
if (obj.removeEventListener) {
obj.removeEventListener(type, handler, false);
} else if (obj.detachEvent) {
obj.detachEvent("on" + type, handler);
} else {
obj["on" + type] = null;
}
},
getEvent: function(event) {
return event ? event : window.event;
},
getTarget: function(event) {
return event.target || event.srcElement;
},
preventDefault: function(event) {
if (event.preventDefault) {
event.preventDefault();
} else {
event.returnValue = false;
}
},
stopPropagation: function(event) {
if (event.stopPropagation) {
event.stopPropagation();
} else {
event.cancelBubble = true;
}
},
getWheelDelta: function(event) {
if (event.wheelDelta) {
return event.wheelDelta;
} else {
return -event.detail * 40;
}
}
};
//tip:滚动条上面的长度可变的按钮
//scrollBar:滚动条
//section:内容父级
//article:内容
function ScrollBar(tip, scrollBar, section, article) {
this.oTip = document.getElementById(tip);
this.oScrollBar = document.getElementById(scrollBar);
this.oSection = document.getElementById(section);
this.oArticle = document.getElementById(article);
var _this = this;
this.init();
this.oTip.onmousedown = function(ev) {
_this.Down(ev);
return false;
};
//给需要加滚动事件的元素加滚动事件
EventUtil.addHandler(this.oSection, 'mousewheel', function(ev) {
_this.onMouseWheel(ev);
}); //ie,chrome
EventUtil.addHandler(this.oSection, 'DOMMouseScroll', function(ev) {
_this.onMouseWheel(ev);
}); //ff
EventUtil.addHandler(this.oScrollBar, 'mousewheel', function(ev) {
_this.onMouseWheel(ev);
}); //ie,chrome
EventUtil.addHandler(this.oScrollBar, 'DOMMouseScroll', function(ev) {
_this.onMouseWheel(ev);
}); //ff
};
//初始化滚动条,内容不够时隐藏滚动条,滚动条按钮长度由内容长度决定
ScrollBar.prototype.init = function() {
if (this.oSection.offsetHeight >= this.oArticle.offsetHeight) {
this.oScrollBar.style.display = 'none';
} else {
this.oTip.style.height = 100 * this.oScrollBar.offsetHeight / (this.oArticle.offsetHeight - this.oSection.offsetHeight) + 'px';
//document.title = this.oTip.style.height;
}
//各浏览器行高,字体大小,字体类型,不一致,要想初始化滚动条一致,先统一样式
};
ScrollBar.prototype.Down = function(ev) {
var oEvent = EventUtil.getEvent(ev);
var _this = this;
this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
this.disY = oEvent.clientY - this.oTip.offsetTop;
document.onmousemove = function(ev) {
_this.fnMove(ev);
return false;
}
document.onmouseup = function(ev) {
_this.Up(ev);
}
};
ScrollBar.prototype.fnMove = function(ev) {
var oEvent = EventUtil.getEvent(ev);
var t = oEvent.clientY - this.disY;
this.Move(t);
};
ScrollBar.prototype.onMouseWheel = function(ev) {
var oEvent = EventUtil.getEvent(ev);
this.maxH = this.oScrollBar.offsetHeight - this.oTip.offsetHeight;
this.disY = oEvent.clientY - this.oTip.offsetTop;
if (EventUtil.getWheelDelta(oEvent) > 0) {
var t = this.oTip.offsetTop - 10;
this.Move(t);
} else {
var t = this.oTip.offsetTop + 10;
this.Move(t);
}
EventUtil.preventDefault(oEvent);
};
ScrollBar.prototype.Move = function(t) {
if (t < 0) {
t = 0;
} else if (t > this.maxH) {
t = this.maxH;
}
this.oTip.style.top = t + 'px';
this.contentH = this.oArticle.offsetHeight - this.oSection.offsetHeight;
this.oArticle.style.top = -this.contentH * this.oTip.offsetTop / this.maxH + 'px';
};
ScrollBar.prototype.Up = function(ev) {
document.onmousemove = document.onmouseup = null;
};
window.ScrollBar = ScrollBar;
}();
调用实例:
<!DOCTYPE html>
<html lang="en" id="html">
<head>
<meta charset="UTF-8" />
<title>title here</title>
<script src="scrollBar.js"></script>
<style>
#section{position:absolute;top:200px; left:50px;width:300px; height:298px; border:1px solid #999; overflow: hidden; }
#article{position:absolute;padding:20px; text-indent: 30px;font-size: 14px; line-height: 25px; font-family: '微软雅黑';}
#scrollBar{ position:absolute;top:0; right:0;height:300px; width:20px; background:#ddd;}
#tip{position:absolute;top:0;left:0; background:#999; width:20px; min-height:20px; cursor:pointer;}
</style>
</head>
<body id="body" style="height:2000px;">
<div id="section">
<div id="article">
一滴血而已,居然带动天地大势,滚滚而涌,让大漠沸腾,沙浪拍天,所有人都在颤栗! 异域百世
一滴血,居然造成这种要灭世般的景象,怎能令人不畏? “不朽之王!” 这一刻,异域百万大军顶礼膜拜后,全都高呼,他们激动,神色疯狂,带着敬仰。还有无比的崇敬,仰望血海。 五色血液浩荡,真的如汪洋席卷而来,淹没这里。
的杀气,滔天而上,滚滚沸腾。 大旗横空,如银河翻卷。猎猎作响,绽放出刺目的光,上面有血迹,虽然过去了一个纪元,还未彻底干涸。 因为,那是属于仙王的血,此时像是要滴落了下来,从旗面内不断渗出!
万大军全都跪伏了下去,进行膜拜! 刹那,域外诸多星斗都在摇动,整片大宇宙都要震荡起来,那种威势不可想象,撼天动地,岁月长河跟着浮现。 一滴血而已,就造成了这般无法理解的恐怖景象! 所有人都知道,那是异域的无上强者演绎的,真身过不来,洒出一滴血,跨过天渊,飞临这片战场中。 一滴血,晶莹欲滴,绽放五色不朽之光,滚滚而来,看着很小一滴,但是气势磅礴,压的乾坤轰鸣,要崩溃了。 帝关,城墙上。 许多人胆寒,哪怕有巨城可守,难以攻破,众人也惶恐,神魂都在不由自主的颤栗。 “我就知道,孟天正惹大祸了,我都已经谈好条件,他还出城,今日若有大难,他将是千古罪人!”金太君说道。 至于各族修士,包括金系人马、杜家等都早已说不出话来,那种恐怖波动,让他们一个脸色苍白。 许多人都觉得,不朽之王是不可战胜的,万一他们真的动身过来,城破了怎么办? “应该……不会跨界吧?”一些人颤声道,这是杜家的大统领。 “跨界与否,一直是五五之数,就看他们的心意了!”金太君手拄着木杖说道。 帝关前,出城作战的帝关修士自然也都面色发白了,虽然说他们很勇猛,无所畏惧,但是那种压迫让他们身体难受。 轰! 几件仙器发光,隔绝外界,绽放出一缕又一缕白雾,那是仙气在弥漫,守护了他们。 然而,那滴血也发生了奇异的变化。迅速放大,如同汪洋一般,席卷了天上地下,迅速而来。铺天盖地。 仿佛世界末日来临,震撼人间,所有人都惶恐,难以抗拒。 域外,一颗又一颗星体都在跟着颤栗。在抖动,间要解体,要在这一刻崩开。 “铁血战旗,不复苏更待何时!”孟天正站在那里,一招手,将那面破烂的战旗取到手中,一声大吼,而后猛力将它掷出。 破烂的战旗,饱经岁月洗礼。带着万古的沉重与沧桑,哗的一声卷动,朝前方飞去,而后不断放大。 到了最后。它抖动起来,原本暗淡的旗面,发出盖
</div>
<div id="scrollBar">
<div id="tip"></div>
</div>
</div>
<script>
new ScrollBar('tip','scrollBar','section','article');
</script>
</body>
</html>
js原生封装自定义滚动条的更多相关文章
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- Vue.js 桌面端自定义滚动条组件|vue美化滚动条VScroll
基于vue.js开发的小巧PC端自定义滚动条组件VScroll. 前段时间有给大家分享一个vue桌面端弹框组件,今天再分享最近开发的一个vue pc端自定义滚动条组件. vscroll 一款基于vue ...
- javascript封装自定义滚动条方法,可自定义四个边框滚动条
还是根据我的个人习惯封装了一个方法 setScroll({ box :父盒子DOM对象, content : 内容盒子DOM对象, scrollall : 滚动条大盒子DOM对象, scroll : ...
- js原生封装getClassName()方法-ie不支持getElementsByClassName,所以要自己实现获取类名为className的所有元素
<html> <head> <script type="text/javascript"> window.onload = function() ...
- Js原生封装选项卡组件
class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...
- js原生函数一些封装
这是一些js原生封装的函数,主要是为了兼容IE浏览器,如下 获取css样式 function getStyle(ele, prop) { if(window.getComputedStyle) { r ...
- 利用JS实现自定义滚动条
一般默认的滚动条会比较丑,我们可以用简单的js实现自定义滚动条的功能: 代码如下: <!doctype html> <html> <head> <meta c ...
- js自定义滚动条
今天听到别人说自定义滚动条,所以就在吃饭的时间写了个 html部分 <div class="out" id="out"> <div class ...
- css和js实现硬件加速渲染自定义滚动条
听别人说用CSS的变换来实现渲染有硬件加速的效果,看到很多大网站都开始陆续使用上了,我也来说说怎么做,我这边实现的滚动条有自然滚动效果,看起来比较自然,说的再多不如直接写,让我们开始吧! 我们需要自己 ...
随机推荐
- Mysql 授权访问
' WITH GRANT OPTION; FLUSH PRIVILEGES; 这就是设置一个 urser:root pwd: 账号,该账号可以在任何机器,同时访问服务器
- hibernate spring 事务配置
<tx:advice id="txAdvice" transaction-manager="transactionManager"> <tx: ...
- jQuery Asynchronous
http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html http:// ...
- Python4Delphi也是与VCL密切相关,所以才能相互调用,绝对有研究价值!
Python4Delphi也是与VCL密切相关,所以才能相互调用,绝对有研究价值! http://www.cnblogs.com/GarfieldTom/archive/2013/01/17/2864 ...
- Caption,Text,WindowText的区别——TControl也有FText,是为了模拟一个窗口
TControl = class(TComponent) // 控件的Windows功能从TControl开始 property Caption: TCaption read GetText writ ...
- Merge Intervals——LeetCode
Given a collection of intervals, merge all overlapping intervals. For example,Given [1,3],[2,6],[8,1 ...
- Java系统变量设置方式
近期碰到一个编码的问题,发现整个平台都是用的GB2312,因此导致webservice调用时有些字不能正常接受. 反编译中间件的源码如下: public static final String nod ...
- Python 实时日志平台 Sentry
原文地址:http://www.oschina.net/p/sentry Sentry 是一个实时的事件日志和聚合平台,基于 Django 构建. Sentry 可以帮助你将 Python 程序的所有 ...
- poj1323
题目大意: 预测游戏 假如有MR人,包括你自己,玩一个特殊的卡片游戏,开始的时候,没有参与者接收到N张卡片,这pip卡片是一个正整数最少M*N,没有两张pip卡片是一样的,在一圈后,每个玩家选择一张卡 ...
- Linux 输出重定向>和>>的区别是什么
> 是定向输出到文件,如果文件不存在,就创建文件:如果文件存在,就将其清空:一般我们备份清理日志文件的时候,就是这种方法:先备份日志,再用`>`,将日志文件清空(文件大小变成0字节): & ...