div模拟滚动条
<%@ 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;
}
p
{
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模拟滚动条的更多相关文章
- JQuery Div层滚动条控制（模拟横向滚动条在最顶端显示）
想让DIV层滚动条显示在顶端,CSS样式没找到相关属性,于是用2个DIV层来模拟做了一个.经测试IE浏览器上显示并不太美观!不知道是否还有更好的办法可以实现这功能呢? aaaaaaasssssss ...
- javascript动画系列第五篇——模拟滚动条
× 目录 [1]原理介绍 [2]数字加减 [3]元素尺寸[4]内容滚动 前面的话 当元素内容溢出元素尺寸范围时,会出现滚动条.但由于滚动条在各浏览器下表现不同,兼容性不好.所以,模拟滚动条也是很常见的 ...
- [聊天框]让DIV的滚动条自动滚动到最底部 - 4种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...
- div模拟textarea以实现高度自适应实例页面
作为多行文本域功能来讲,textarea满足了我们大部分的需求.然而,textarea有一个不足就是不能像普通div标签一样高度可以跟随内容自适应.textarea总是很自信地显摆它的滚动条,高度固执 ...
- JS模拟滚动条(有demo和源码下载,支持拖动 滚轮 点击事件)
由于游览器自带的滚动条在美观方面并不是很好看,所以很多设计师希望通过自己设计出来的滚动条来做这样的效果,JS模拟滚动条其实很早看到jQuery有这样的插件或者KISSY有这样的组件,一直想着自己什么时 ...
- div模拟textarea文本域轻松实现高度自适应——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1362 一.关于tex ...
- div模拟textarea在ios下不兼容的问题解决
今天发现一个好东西,赶紧记下来,我在用textarea的时候,想要自适应高度,这样就不会出现滚动条.网上找了很多,都是用div模拟的,但是好扯淡,div模拟的在ios下不能聚焦并且不能输入.真坑... ...
- 让DIV的滚动条自动滚动到最底部 - 3种方法
要制作一个在线聊天的程序,在做最后的修饰时,需要对获得的信息即时滚动以保证用户总能看到最新消息. 聊天程序是基于AJAX设计的,没有用框架,消息容器是一个DIV,所以问题就在于如何控制DIV的滚动条. ...
- ie下div模拟的表格，表头表体无法对齐
现象:ie下,如果某个区域滚动显示表格内容(div模拟的table),表体出现滚动条的时候,会跟表头无法对齐. 解决方法:1.首先需要知道两个高度:表体最大高度height1.目前表体要显示的内容高度 ...
随机推荐
- ICSharpCode.SharpZipLib.Zip
//压缩整个目录下载 var projectFolder = Request.Params["folder"] != null ? Request.Params["fol ...
- nutch2.3命令参数解析
nutch中可执行的命令列表 [root@ewanalysis ~]# nutch Usage: nutch COMMAND where COMMAND is one of: inject injec ...
- 改良版的SQL Service 通用存储过程分页
上次写了通用存储过程.感觉还是有很大的BUG.就是条件不能参数画化.这个BUG可以说是致命的.但是我一直想在用什么方法能解决这个东西.其实我只是想写少量的代码来做更多的事情.我想能不能传集合给存储过程 ...
- Sql Server 服务器名称\实例名称 无法连接 Server Name\Instance Name
解决步骤: 1: Sql Server是否已经启动. 2: 检查Sql Server服务器是否开启TCP/IP协议. 侦听的默认端口为1433 3: ping 数据库 ...
- Linux 学习之防火墙配置
1.安装iptables防火墙 yum install iptables 2. 清除已有的iptables规则 iptables -F iptables -X iptables -Z 3.显 ...
- MYSQL区分大小写
MYSQL区分大小写 1.linux下mysql安装完后是默认:区分表名的大小写,不区分列名的大小写: 2.用root帐号登录后,在/etc/my.cnf 中的[mysqld]后添加添加lower ...
- CentOS yum安装配置lnmp服务器（Nginx+PHP+MySQL）
1.配置防火墙,开启80端口.3306端口 vi /etc/sysconfig/iptables-A INPUT -m state --state NEW -m tcp -p tcp --dport ...
- hibernate中多对多关联
hibernate中多对多关联 “计应134(实验班) 凌豪” 在关系数据库中有一种常见的关系即多对多关系,例如课程和学生的关系,一个学生可以选择多门课程,同时一门课程也可以被多个学生选择, 因此课程 ...
- JAVA并发，BlockingQuene
BlockingQueue也是java.util.concurrent下的主要用来控制线程同步的工具. BlockingQueue有四个具体的实现类,根据不同需求,选择不同的实现类1.ArrayBlo ...
- 项目关联不上开源项目（library）
首先是add library的时候重新打开始始终显示关联错误,在reference中出现一个红叉,无论如何都解决不了,remove后重新添加也会有这个问题,Eclipse也没有任何出错提示. 最后在h ...