首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

div模拟滚动条效果示例代码

Posted in Javascript onOctober 16, 2013 
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="html.aspx.cs" Inherits="WebApplication1.html" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<style type="text/css"> 
* 
{ 
margin: 0; 
padding: 0; 
} 
{ 
height: 1000px; 
} 
#mainBox 
{ 
width: 250px; 
height: 500px; 
border: 1px #bbb solid; 
position: relative; 
overflow: hidden; 
margin: 50px auto; 
} 
#content 
{ 
height:1000px; 
position: absolute; 
left: 0; 
top: 0; 
} 
.scrollDiv 
{ 
width: 6px; 
position: absolute; 
top: 0; 
background: #666; 
border-radius: 10px; 
} 
/* 章节类别 */ 
.m-catr{padding:15px 0 10px 12px;*padding:15px 0 10px 14px;} 
.m-catr .tte{float:left; line-height:35px; text-align:left;font-size:14px; font-weight:bold; color:#5b98db;} 
#content dl{width:225px; float:left; margin-top:10px;} 
#content dl dt, .m-catr dl dd{float:left;width:100%; line-height:25px; text-align:left; color:#444;} 
#content dl dt{font-weight:bold;} 
#content dl dd{margin-left:12px;} 
</style> 
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script> 
<title></title> 
</head> 
<body> 
<!-- 章节类别 --> 
<div class="m-catr f-cb"> 
<div class="tte"> 
章节类别</div> 
<div id="mainBox"> 
<div id="content"> 
<dl data-type="menu"> 
<dt>第一单元科学是系统化了的知识</dt> 
<dd> 
1、千篇一律与千变万化</dd> 
<dd> 
2、双语言时代</dd> 
<dd> 
3、人们如何做出决策</dd> 
<dd> 
4、培养独立工作和独立思考的人</dd> 
</dl> 
<dl data-type="menu"> 
<dt>第二单元科学是系统化了的知识</dt> 
<dd> 
1、千篇一律与千变万化</dd> 
<dd> 
2、双语言时代</dd> 
<dd> 
3、人们如何做出决策</dd> 
<dd> 
4、培养独立工作和独立思考的人</dd> 
</dl> 
<dl data-type="menu"> 
<dt>第三单元科学是系统化了的知识</dt> 
<dd> 
1、千篇一律与千变万化</dd> 
<dd> 
2、双语言时代</dd> 
<dd> 
3、人们如何做出决策</dd> 
<dd> 
4、培养独立工作和独立思考的人</dd> 
</dl> 
<dl data-type="menu"> 
<dt>第四单元科学是系统化了的知识</dt> 
<dd> 
1、千篇一律与千变万化</dd> 
<dd> 
2、双语言时代</dd> 
<dd> 
3、人们如何做出决策</dd> 
<dd> 
4、培养独立工作和独立思考的人</dd> 
</dl> 
<dl data-type="menu"> 
<dt>第五单元科学是系统化了的知识</dt> 
<dd> 
1、千篇一律与千变万化</dd> 
<dd> 
2、双语言时代</dd> 
<dd> 
3、人们如何做出决策</dd> 
<dd> 
4、培养独立工作和独立思考的人</dd> 
</dl> 
</div> 
</div> 
</div> 
<!-- /章节类别 --> 
<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'); 
_scrollBox.setAttribute("id", "scrollBox"); 
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'); 
$(function () { 
$("#scrollBox").hide(); 
$("#mainBox").mouseover(function () { 

$("#scrollBox").show(); 

}).mouseout(function () { 
$("#scrollBox").hide(); 
}); 
}); 
</script> 
</body> 
</html>

div模拟滚动条效果示例代码

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
兼容IE和FF的js脚本代码小结（比较常用）
Dec 06 Javascript
Jquery 插件开发笔记整理
Jan 17 Javascript
JS随即打乱数组实现代码
Dec 03 Javascript
构造函数+原型模式构造js自定义对象(最通用)
May 12 Javascript
node.js中实现同步操作的3种实现方法
Dec 05 Javascript
JavaScript实现简单的数字倒计时
May 15 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
ES6中非常实用的新特性介绍
Mar 10 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
Jul 17 Javascript
了解JavaScript中let语句
May 30 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 #Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
Oct 16 #Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 #Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 #Javascript
纯Javascript实现Windows 8 Metro风格实现
Oct 15 #Javascript
自定义ExtJS控件之下拉树和下拉表格附源码
Oct 15 #Javascript
Javascript 实现的数独解题算法网页实例
Oct 15 #Javascript
T-SQL(1) 排序失效(1) NFS(1) SeaTunnel(1) 重复数据(2) 黑名单(1) 批处理(1) ftpserver(1) Odoo(1) Logrotate(1)
You might like
PHP 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
PHP 反射(Reflection)使用实例
2015/05/12 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
Aster vs Newbee BO5 第一场2.19
2021/03/10 DOTA
js判断变量是否未定义的代码
2020/03/28 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
直接拿来用的15个jQuery代码片段
2015/09/23 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JavaScript和jQuery制作光棒效果
2017/02/24 Javascript
JS 调试中常见的报错问题解决方法
2017/05/20 Javascript
JS中利用swiper实现3d翻转幻灯片实例代码
2017/08/25 Javascript
jQuery zTree搜索-关键字查询 递归无限层功能实现代码
2018/01/25 jQuery
JS实现520 表白简单代码
2018/05/21 Javascript
layui 设置table 行的高度方法
2018/08/17 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
element-ui tooltip修改背景颜色和箭头颜色的实现
2019/12/16 Javascript
微信小程序之导航滑块视图容器功能的实现代码(简单两步)
2020/06/19 Javascript
Python 中 list 的各项操作技巧
2017/04/13 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
python用BeautifulSoup库简单爬虫实例分析
2018/07/30 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python匿名函数/排序函数/过滤函数/映射函数/递归/二分法
2019/06/05 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
python实现简单聊天室功能 可以私聊
2019/07/12 Python
python制作朋友圈九宫格图片
2019/11/03 Python
python中p-value的实现方式
2019/12/16 Python
python 解决flask 图片在线浏览或者直接下载的问题
2020/01/09 Python
python在不同条件下的输入与输出
2020/02/13 Python
python 调用Google翻译接口的方法
2020/12/09 Python
敬老文明号事迹材料
2014/01/16 职场文书
青春励志演讲稿
2014/04/29 职场文书
法制宣传标语
2014/06/23 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
2015最新民情日记范文
2015/06/26 职场文书
企业宣传稿范文
2015/07/23 职场文书