首页
所有分类
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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
javascript获取作用在元素上面的样式属性代码
Sep 20 Javascript
计算新浪Weibo消息长度(还可以输入119字)
Jul 02 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
Nov 01 Javascript
Event altKey,ctrlKey,shiftKey属性解析
Dec 18 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
给easyui的datebox控件添加清空按钮的实现方法
Nov 09 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
jQuery实现导航样式布局操作示例【可自定义样式布局】
Jul 24 jQuery
js获取 gif 的帧数的代码实例
Sep 10 Javascript
基于Nuxt.js项目的服务端性能优化与错误检测(容错处理)
Oct 23 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
铁拳(1) 小缇娜的奇幻之地(1) 绿林侠盗(1) 吸血鬼(1) 大话西游(1) 遗弃(1) 战锤40K(1) 模拟人生(1) 东方异文石(1) LOL(1)
You might like
浅谈php和js中json的编码和解码
2016/10/24 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
爆炸式的JS圆形浮动菜单特效代码
2010/03/03 Javascript
JS 面向对象之神奇的prototype
2011/02/26 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
js判断变量是否未定义的代码
2020/03/28 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
2015/08/11 Javascript
浅析nodejs实现Websocket的数据接收与发送
2015/11/19 NodeJs
Vue.js 2.0学习教程之从基础到组件详解
2017/04/24 Javascript
JS实现简单短信验证码界面
2017/08/07 Javascript
微信小程序 POST请求的实例详解
2017/09/29 Javascript
js原生实现移动端手指滑动轮播图效果的示例
2018/01/02 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
git使用.gitignore设置不生效或不起作用问题的解决方法
2017/06/01 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
python适合人工智能的理由和优势
2019/06/28 Python
python 多进程队列数据处理详解
2019/12/23 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
python3中celery异步框架简单使用+守护进程方式启动
2021/01/20 Python
Kickers鞋英国官网：男士、女士和儿童鞋
2021/03/08 全球购物
PHP如何自定义函数
2016/09/16 面试题
介绍一下linux的文件权限
2014/07/20 面试题
光盘行动倡议书
2014/02/02 职场文书
区级文明单位申报材料
2014/05/15 职场文书
电教室标语
2014/06/20 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
房产公证书
2015/01/23 职场文书
电力安全教育培训心得体会
2016/01/11 职场文书
公文格式，规则明细（新手收藏）
2019/07/23 职场文书
Mysql中 unique列插入重复值该怎么解决呢
2021/05/26 MySQL
手把手教你导入Go语言第三方库
2021/08/04 Golang