<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>自定义滚动条</title>
<link rel="stylesheet" href="">
<style type="text/css">
#warpper {
width: 500px;
height: 300px;
margin: 200px;
position: relative;
}
#contentWrapper{
width: 480px;
height: 300px;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
#content {
width: 480px;
height: auto;
position: absolute;
top: 0;
left: 0;
line-height: 30px;
}
#scrollbarp {
width: 20px;
background-color: blue;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
#scrollbar {
width: 20px;
background-color: red;
height: 30px;
position: absolute;
top: 0px;
right: 0px;
cursor: hand;
}
</style>
<script type="text/javascript">
window.onload = function() {
var content = document.getElementById("content");
var scrollbar = document.getElementById("scrollbar");
var scrollbarp = document.getElementById("scrollbarp");
scrollbar.onmousedown = function(e) {
//记录鼠标的位置，滚动条当前的top
var e = e || window.event;
/***
鼠标按下的时候,记录Y轴偏移距离
这个距离是一个比较的偏移位置
当鼠标滑动的时候鼠标变化的位置，减去鼠标按下的时候
记录的偏移位置，就是滚动条要移动的位置
***/
var disY = e.clientY - this.offsetTop;
var TMax = scrollbarp.offsetHeight - scrollbar.offsetHeight;
// contentMaxT--包裹内容的div最大的top值
var contentMaxT = content.offsetHeight-contentWrapper.offsetHeight;
console.log("down: disY : "+disY+" cy: "+e.clientY+"-----top： "+this.offsetTop);
if(scrollbar.setCapture){
scrollbar.setCapture();
}
document.onmousemove = function(ev) {
var ev = ev || window.event;
var T = ev.clientY - disY;
if (T < 0) {
T = 0;
}
if (T > TMax) {
T = TMax;
}
var scale = T / TMax;
content.style.top = -scale * contentMaxT+"px";
console.log("disY " + disY + " cy " + ev.clientY + " T " + T);
scrollbar.style.top = T + "px";
return false;
}
document.onmouseup = function() {
document.onmouseup = document.onmousemove = null;
if(scrollbar.releaseCapture){
scrollbar.releaseCapture();
}
}
return false;
}
}
</script>
</head>
<body>
<div id="warpper">
<span id="contentWrapper">
<span id="content">
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费使得房贷首付水电费使得</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
1水电费使得房贷首付使得房贷首付水电费</br>
2水电费使得房贷首付使得房贷首付水电费</br>
3水电费使得房贷首付使得房贷首付水电费</br>
4水电费使得房贷首付使得房贷首付水电费</br>
5水电费使得房贷首付使得房贷首付水电费</br>
6水电费使得房贷首付使得房贷首付水电费</br>
7水电费使得房贷首付使得房贷首付水电费</br>
8水电费使得房贷首付使得房贷首付水电费</br>
9水电费使得房贷首付使得房贷首付水电费</br>
0水电费使得房贷首付使得房贷首付水电费</br>
</span>
</span>
<span id="scrollbarp">
<span id="scrollbar"></span>
</span>
</div>
</body>
</html>
分享到：
相关推荐
javascript实现自定义滚动条效果 在实际项目中，遇到上下滚动条和左右滚动条不在一个DIV内部，所以某些情况下，右侧滚动条不可见。但是需要咋同一个视口内显示两个滚动条。 一个解决思路是：自定义滚动条，隐藏...
javascript+div+css滚动条实例
在页面中，经常会遇到这样的效果，一个图层总是在某一个位置，无论滚动条滚动与否，这个Div始终都在这个位置显示。刚开始以为是用js实现的，确实，可以利用js去实现，但是在css中有更好的方法。利用position属性...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜...
3.scrolling弹出框是否有滚动条 可选值 auto no yes 默认auto 4.titleColor 弹出框title背景颜色 默认#7093DB 5.title 弹出框名称 6.弹出框url 7.弹出框是否可拖动 true or false 兼容各种主流浏览器,绝对精美,配置...
运用div+css做了首页面index.html的整体布局，细节部分使用表格进行布局 共四个页面图，主页面，注册页面，登录页面，...核心代码有搜索框，滚动新闻条，二级下拉菜单。 （本网站设计有完整的实验报告，可直接使用）
41.jquery拖动滚动条控制图片滚动及图片放大特效的示例 42.jquery旋转式图片切换并带图片放大功能 43.jQuery漂亮网页右上角双层撕角广告代码 44.jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
标签上下层滑动替换特效代码,超酷图片特效(适合做成flash),漂亮的导航条,选项卡,div+css制作房子,表格背景色动态控制,JS对表格增删查改,跟随上下以及左右滚动条滚动的层,可以折叠的表格, 选择日期控件,导航条,...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.1.1 列表的符号 8.1.2 图片符号 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的...
jQuery滚动条一个用于将自定义滚动条添加到div的jQuery插件Scrollbars，一个jQuery插件，用于向div中添加自定义滚动条。 版本：0.1 插件URI： : 作者：大卫·波西（David Posey） 作者URI： ： 执照：GPL===========...
设置滚动条.html 设置滚动条。 框架实例手把手.html 演示框架实例手把手。 第10章（源代码\第10章） 示例描述：本章演示移动字体和图片用法。 移动的基本语法.html 移动的基本语法。 文字的移动方向....
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 ...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜...
41. jquery拖动滚动条控制图片滚动及图片放大特效的示例 42. jquery旋转式图片切换并带图片放大功能 43. jQuery漂亮网页右上角双层撕角广告代码 44. jquery漂亮网页布局综合定时器、切换间隔、滚动时间、滚动图片...
7.3 页面滚动条 第8章 用CSS制作实用的菜单 8.1 项目列表 8.2 无需表格的菜单 8.3 菜单的横竖转换 8.4 菜单实例一：百度导航条 8.5 菜单实例二：流行的Tab菜单 第9章 CSS滤镜...
两个对象：div1 和 div2，其中div1是div2的父元素，div2只能在div1的范围内拖拽 图中，红点是鼠标的位置，两个绿色箭头相减的结果就是disX，最后oEvent.clientX – disX 就是绿色箭头的部分，这个长度就是判断...
CSS2中文手册+CSS在线编辑器 CSS代码生成器 1.1 GB转UTF8小工具 Meta 标签生成器 Meta标签详解 常用javascript特效 弹出式窗口代码产生器 滚动条颜色生成器 框架网页代码生成器 网页代码调试器 在线DIV+CSS编辑器 ...
而当我们下拉滚动条，随着页面向下滚动，当此工具条接触到浏览器的上边缘时，这时就会独立出来固定在顶部，不跟随页面滚动而滚动了，如下图： 类似的例子效果我们在别的网站上都有看到过，例如腾讯微博首页上，当...
第12章 CSS样式与JavaScript脚本 应用 458 ...实例324 在刷新或提交页面后保持页面滚动条 的位置 505 实例325 Javascript和C#之间的互相调用与 访问 506 实例326 制作网站后管理页中自动伸缩的菜单 507