首页
所有分类
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 相关文章推荐
JavaScript中的History历史对象
Jan 16 Javascript
地址栏传递中文参数乱码在js里用escape转码
Aug 28 Javascript
js截取字符串的两种方法及区别详解
Nov 05 Javascript
关于页面刷新vuex数据消失问题解决方案
Jul 03 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
不使用JavaScript实现菜单的打开和关闭效果demo
May 01 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
利用Dectorator分模块存储Vuex状态的实现
Feb 05 Javascript
javascript验证form表单数据的案例详解
Mar 25 Javascript
javascript实现倒计时效果
Feb 17 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JavaScript展开运算符和剩余运算符的区别详解
Feb 18 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
R72E(1) win11(40) 对讲机(1) i7 6700(1) i5 10400(1) win10(43) GTX1660(1) i5 9400(1) ipad(1) React(6)
You might like
php算开始时间到过期时间的相隔的天数
2011/01/12 PHP
PHP 自定义错误处理函数的使用详解
2013/05/10 PHP
Yii的CDbCriteria查询条件用法实例
2014/12/04 PHP
PHP中的替代语法介绍
2015/01/09 PHP
4种PHP异步执行的常用方式
2015/12/24 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
javascript css styleFloat和cssFloat
2010/03/15 Javascript
js href的用法
2010/05/13 Javascript
Mootools 图片展示插件(lightbox,ImageMenu)收集集合
2010/05/21 Javascript
js改变img标签的src属性在IE下没反应的解决方法
2013/07/23 Javascript
js加载读取内容及显示与隐藏div示例
2014/02/13 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
2015/04/21 Javascript
jquery validate demo 基础
2015/10/29 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
基于JS实现EOS隐藏错误提示层代码
2016/04/25 Javascript
javascript类型系统——日期Date对象全面了解
2016/07/13 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
2018/09/20 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
2018/12/10 jQuery
加速vue组件渲染之性能优化
2020/04/09 Javascript
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python3+PyQt5使用数据库窗口视图
2018/04/24 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
pytorch 数据集图片显示方法
2018/07/26 Python
python操作excel让工作自动化
2019/08/09 Python
pytorch实现从本地加载 .pth 格式模型
2020/02/14 Python
Django中的session用法详解
2020/03/09 Python
详解基于python的图像Gabor变换及特征提取
2020/10/26 Python
印度尼西亚综合购物网站：Lazada印尼
2016/09/07 全球购物
农村婚礼证婚词
2014/01/08 职场文书
医学生个人求职信范文
2014/02/07 职场文书
学习雷锋精神心得体会范文
2014/03/12 职场文书
大学生自荐书范文
2015/03/05 职场文书
Python基础之元类详解
2021/04/29 Python