首页
所有分类
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 相关文章推荐
Jquery 高亮显示文本中重要的关键字
Dec 24 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
js验证身份证号有效性并提示对应信息
Oct 19 Javascript
javascript学习笔记_浅谈基础语法,类型,变量
Sep 19 Javascript
Vue.js绑定HTML class数组语法错误的原因分析
Oct 19 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
JavaScript实现父子dom同时绑定两个点击事件,一个用捕获,一个用冒泡时执行顺序的方法
Mar 30 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
vue-router的使用方法及含参数的配置方法
Nov 13 Javascript
js中call()和apply()改变指针问题的讲解
Jan 17 Javascript
解决vue-cli项目开发运行时内存暴涨卡死电脑问题
Oct 29 Javascript
微信小程序文章列表功能完整实例
Jun 03 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
cudn(1) 脚本(1) expdp(1) callback(1) 热力图(1) cudnn(1) 字符画(1) hook(1) Vite(1) dict(1)
You might like
PHP简介
2006/10/09 PHP
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
PHP实现支付宝即时到账功能
2016/12/21 PHP
JavaScript 常用函数
2009/12/30 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
转换字符串为json对象的方法详解
2013/11/29 Javascript
js无刷新操作table的行和列
2014/03/27 Javascript
原生javascript实现简单的datagrid数据表格
2015/01/02 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
2015/05/19 Javascript
js省市联动效果完整实例代码
2015/12/09 Javascript
jQuery获取多种input值的简单实现方法
2016/06/20 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
2016/07/05 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
jQuery手风琴的简单制作
2017/05/12 jQuery
jQuery 实现双击编辑表格功能
2017/06/19 jQuery
jquery select插件异步实时搜索实例代码
2017/10/20 jQuery
解析vue data不可以使用箭头函数问题
2018/07/03 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
教你使用vue-cli快速构建的小说阅读器
2019/05/13 Javascript
简单解决Python文件中文编码问题
2015/11/22 Python
CentOS下使用yum安装python-pip失败的完美解决方法
2017/08/16 Python
Python中的上下文管理器和with语句的使用
2018/04/17 Python
python 读取文本文件的行数据,文件.splitlines()的方法
2018/07/12 Python
简单了解python中对象的取反运算符
2019/07/01 Python
python 将字符串中的数字相加求和的实现
2019/07/18 Python
django中使用Celery 布式任务队列过程详解
2019/07/29 Python
Python操作SQLite数据库过程解析
2019/09/02 Python
在Mac中PyCharm配置python Anaconda环境过程图解
2020/03/11 Python
详解Html5中video标签那些属性和方法
2019/07/01 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
自主招生教师推荐信
2014/05/10 职场文书
公司向个人借款协议书范本
2014/10/09 职场文书
禁毒主题班会教案
2015/08/14 职场文书
2016年乡镇综治宣传月活动总结
2016/03/16 职场文书
文书工作总结（范文）
2019/07/11 职场文书
CSS中em的正确打开方式详解
2021/04/08 HTML / CSS