除了上下两个箭头以外，滚动条和一般的浏览器基本差不多
html结构很简单，mainBox是外层div，content是内容，滚动条div是js动态生成的.
<div id="mainBox">
<div id="content"></div>
</div>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div模拟的自定义滚动条</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
p {
height: 1000px;
}
#mainBox {
width: 400px;
height: 500px;
border: 1px #bbb solid;
position: relative;
overflow: hidden;
margin: 50px auto;
}
#content {
height: 2500px;
position: absolute;
left: 0;
top: 0;
background:url(img/scrollTest.jpg);
}
.scrollDiv {
width: 18px;
position: absolute;
top: 0;
background: #666;
border-radius: 10px;
}
</style>
</head>
<body>
<div id="mainBox">
<div id="content"></div>
</div>
<p></p>
<script type="text/javascript">
var doc = document;
var _wheelData = -1;
var mainBox = doc.getElementById('mainBox');
function bind(obj, type, handler) {
var node = typeof obj == "string" ? $(obj) : obj;
if (node.addEventListener) {
node.addEventListener(type, handler, false);
} else if (node.attachEvent) {
node.attachEvent('on' + type, handler);
} else {
node['on' + type] = handler;
}
}
function mouseWheel(obj, handler) {
var node = typeof obj == "string" ? $(obj) : obj;
bind(node, 'mousewheel', function(event) {
var data = -getWheelData(event);
handler(data);
if (document.all) {
window.event.returnValue = false;
} else {
event.preventDefault();
}
});
//火狐
bind(node, 'DOMMouseScroll', function(event) {
var data = getWheelData(event);
handler(data);
event.preventDefault();
});
function getWheelData(event) {
var e = event || window.event;
return e.wheelDelta ? e.wheelDelta : e.detail * 40;
}
}
function addScroll() {
this.init.apply(this, arguments);
}
addScroll.prototype = {
init : function(mainBox, contentBox, className) {
var mainBox = doc.getElementById(mainBox);
var contentBox = doc.getElementById(contentBox);
var scrollDiv = this._createScroll(mainBox, className);
this._resizeScorll(scrollDiv, mainBox, contentBox);
this._tragScroll(scrollDiv, mainBox, contentBox);
this._wheelChange(scrollDiv, mainBox, contentBox);
this._clickScroll(scrollDiv, mainBox, contentBox);
},
//创建滚动条
_createScroll : function(mainBox, className) {
var _scrollBox = doc.createElement('div')
var _scroll = doc.createElement('div');
var span = doc.createElement('span');
_scrollBox.appendChild(_scroll);
_scroll.appendChild(span);
_scroll.className = className;
mainBox.appendChild(_scrollBox);
return _scroll;
},
//调整滚动条
_resizeScorll : function(element, mainBox, contentBox) {
var p = element.parentNode;
var conHeight = contentBox.offsetHeight;
var _width = mainBox.clientWidth;
var _height = mainBox.clientHeight;
var _scrollWidth = element.offsetWidth;
var _left = _width - _scrollWidth;
p.style.width = _scrollWidth + "px";
p.style.height = _height + "px";
p.style.left = _left + "px";
p.style.position = "absolute";
p.style.background = "#ccc";
contentBox.style.width = (mainBox.offsetWidth - _scrollWidth)
+ "px";
var _scrollHeight = parseInt(_height * (_height / conHeight));
if (_scrollHeight >= mainBox.clientHeight) {
element.parentNode.style.display = "none";
}
element.style.height = _scrollHeight + "px";
},
//拖动滚动条
_tragScroll : function(element, mainBox, contentBox) {
var mainHeight = mainBox.clientHeight;
element.onmousedown = function(event) {
var _this = this;
var _scrollTop = element.offsetTop;
var e = event || window.event;
var top = e.clientY;
//this.onmousemove=scrollGo;
document.onmousemove = scrollGo;
document.onmouseup = function(event) {
this.onmousemove = null;
}
function scrollGo(event) {
var e = event || window.event;
var _top = e.clientY;
var _t = _top - top + _scrollTop;
if (_t > (mainHeight - element.offsetHeight)) {
_t = mainHeight - element.offsetHeight;
}
if (_t <= 0) {
_t = 0;
}
element.style.top = _t + "px";
contentBox.style.top = -_t
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
_wheelData = _t;
}
}
element.onmouseover = function() {
this.style.background = "#444";
}
element.onmouseout = function() {
this.style.background = "#666";
}
},
//鼠标滚轮滚动，滚动条滚动
_wheelChange : function(element, mainBox, contentBox) {
var node = typeof mainBox == "string" ? $(mainBox) : mainBox;
var flag = 0, rate = 0, wheelFlag = 0;
if (node) {
mouseWheel(
node,
function(data) {
wheelFlag += data;
if (_wheelData >= 0) {
flag = _wheelData;
element.style.top = flag + "px";
wheelFlag = _wheelData * 12;
_wheelData = -1;
} else {
flag = wheelFlag / 12;
}
if (flag <= 0) {
flag = 0;
wheelFlag = 0;
}
if (flag >= (mainBox.offsetHeight - element.offsetHeight)) {
flag = (mainBox.clientHeight - element.offsetHeight);
wheelFlag = (mainBox.clientHeight - element.offsetHeight) * 12;
}
element.style.top = flag + "px";
contentBox.style.top = -flag
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
});
}
},
_clickScroll : function(element, mainBox, contentBox) {
var p = element.parentNode;
p.onclick = function(event) {
var e = event || window.event;
var t = e.target || e.srcElement;
var sTop = document.documentElement.scrollTop > 0 ? document.documentElement.scrollTop
: document.body.scrollTop;
var top = mainBox.offsetTop;
var _top = e.clientY + sTop - top - element.offsetHeight
/ 2;
if (_top <= 0) {
_top = 0;
}
if (_top >= (mainBox.clientHeight - element.offsetHeight)) {
_top = mainBox.clientHeight - element.offsetHeight;
}
if (t != element) {
element.style.top = _top + "px";
contentBox.style.top = -_top
* (contentBox.offsetHeight / mainBox.offsetHeight)
+ "px";
_wheelData = _top;
}
}
}
}
new addScroll('mainBox', 'content', 'scrollDiv');
</script>
</body>
</html>
- 大小: 132.6 KB
- 大小: 397 KB
分享到：
相关推荐
Div仿制table送自定义Scrollbar支持排序，支持IE6及以上浏览器
本文实例讲述了JS实现的页面自定义滚动条效果。分享给大家供大家参考，具体如下： 这里演示网页上用的滚动条效果，是一个自定义的滚动条代码，除了上下两个箭头以外，滚动条和一般的浏览器基本差不多，鼠标滚轮滚动...
本文实例讲述了jQuery自定义滚动条实现方法。分享给大家供大家参考，具体如下： 很多时候，由于美观上的考虑，往往需要自定义各种各样的滚动条，因此，本人做了一个demo 运行效果截图如下： 以下是代码部分： <...
内容索引:脚本资源,Ajax/JavaScript,滚动 JavaScript控制一个DIV层实现平滑滚动，这里模拟了浏览器滚动条的功能，只不过这个滚动条是用图像实现的自定义滚动条，滚动效果平滑，演示可看截图，看上去还不错。
需求：AJAX滚动滚动条加载数据的下拉列表 控件名称：Webcombo 所用技术：ASP.NET(C#)，jQuery，ASP.NET一般处理文件（.ashx） 下拉列表具体实现：用DIV模拟下拉列表，input和图片模拟下拉框。最终结果如下图 先分析...
iScroll 是一款针对web app使用的滚动控件，它可以模拟原生IOS应用里的滚动列表操作，还可以实现缩放、拉动刷新、精确捕捉元素、自定义滚动条等功能。这里博主使用的版本iScroll4.25，目前最新版本是iScroll5，大家...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取内容...
' "网页_隐藏滚动条","网页_滚动条控制","网页_滚动条固定","网页_滚动条取位置","网页_滚动条取高宽","网页_替换选中内容","网页_创建新网页","网页_高亮关键字" ' "文本框_取对象","文本框_取数量","文本框_取内容...
5.4 带滚动条的自动完成 5.5 Combobox风格的自动完成 5.6 读取XML数据的自动完成 5.7 多维数据的自动完成 第6章 jQuery实现拖放功能 6.1 基本拖放功能 6.2 基于事件的拖放 6.3 限制移动范围的拖放 6.4 延迟进行的...
实例161 文本域的滚动条 192 3.3 下拉列表的应用 193 实例162 省市级联动菜单 193 实例163 省市县级联动菜单 194 实例164 应用下拉列表选择所要联机的网站 196 实例165 可输入字符的下拉菜单 197 实例166 设置下拉...
一开始的需求只是表头部分在滚动时能一直固定在头部，那关键要实现的就是让tr能定位。 首先想到的方法是给tr设置relative，用ie6/7测试以下代码： Code <!DOCTYPE ...
-这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言（en,zh_CN,zh_TW），可以在Web.config中修改。 -将所有的...
-这将会影响所有的aspx页面，一定要将工具条（Toolbars）和Items区分开来。 -祝你生日快乐 - 小师妹妹。 +2009-08-29 v2.0.8 -ExtAspNet支持多语言（en,zh_CN,zh_TW），可以在Web.config中修改。 -将所有的...
实例094 全屏显示无边框有滚动条窗口 140 实例095 应用JavaScript实现指定尺寸的无边框窗口 142 实例096 应用CSS+DIV实现无边框窗口 143 实例097 通过双击鼠标实现页面自动滚屏 145 3.10 其他 146 实例098...
0015 以原始风格显示控件的滚动条 11 0016 使用快捷键打开对象观察器中的“...”按钮 11 1.5 其他相关应用技巧 11 0017 安装合适的Delphi版本 11 0018 熟练掌握Delphi中的菜单项 12 0019 构成Delphi项目...