<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>自制滚动条样式</title>
<style type="text/css">
#wraper{position:relative;width:500px;height:200px;padding-right:10px;background-color:#F6F6F6;overflow:hidden;}
#slider{position:absolute;top:0;left:0;margin:0 10px;line-height:1.5;font-size:12px;color:#333;}
#pannel{position:absolute;right:0;top:0;width:6px;height:100%;background-color:#EDEDEB;}
#drag{position:absolute;left:0;width:6px;height:80px;background-color:#BCBCBA;cursor:pointer;}
</style>
</head>
<body>
<div id="wraper">
<div id="slider">
<p>天翼手机俱乐部#今天下午,中国电信将联合摩托罗拉推出电信定制版的“刀锋战士”:锋云XT928。搭载4.5 英寸720p分辨率(1280 x 720 像素)高清触控屏,1300 万像素摄像头,运行Android 2.3 系统,内置 1.2GHz 双核处理器,拥有 1GB RAM。支持CDMA2000 EVDO+GSM双网双待,以及WIFI/WAPI接入移动互联网</p>
<p>【酒量最好的前三名星座】冠军(巨蟹座)、亚军(魔羯座)、季军(金牛座)【酒品最好的前三名星座】冠军(天秤座)、亚军(双鱼座)、季军(水瓶座)【酒量不好,有酒胆,会耍宝的前三名星座】冠军(双子座)、亚军(射手座)、季军(狮子座)。</p>
<p>【安卓软件推荐】动态企鹅桌面时钟是一款以一只可爱小企鹅为题材的桌面时钟!需要你在主屏幕按menu菜单键添加插件显示使用。它表情可爱,动作多多,你亦可连按小工具,它就会转换表情动作,另外还可以和小企鹅互动,喂它喝饮料,吃东西,还可以和小企鹅玩石头剪子布。</p>  
</div>
<div id="pannel">
<div id="drag"></div>
</div>
</div>
<script type="text/javascript">
function customBar(oSlider, oPanel, oTrigger){
this.parent = oSlider.parentNode;
this.slider = oSlider;
this.panel = oPanel;
this.trigger = oTrigger;
this.parentHeight = this.parent.clientHeight;
this.sliderHeight = this.slider.offsetHeight;
this.panelHeight = this.panel.clientHeight;
this.triggerHeight = this.trigger.offsetHeight;
this.k = (this.sliderHeight - this.parentHeight)/(this.panelHeight - this.triggerHeight);
this.dis = 0;
this.flag = false;
this.init();
} var oSlider = document.getElementById('slider'),
oPanel = document.getElementById('pannel'),
oTrigger = document.getElementById('drag'); customBar.prototype = {
init: function(){
if(this.k <= 0){
this.panel.style.display = 'none';
return;
}
this.slider.style.top = '0px';
this.trigger.style.top = '0px';
this.bind();
},
bind: function(){
var that = this;
this.trigger.onmousedown = function(e){
that.down.call(that, e);
}
this.trigger.onmousemove = document.onmousemove = function(e){
that.move.call(that, e);
}
this.trigger.onmouseup = document.onmouseup = function(e){
that.up.call(that, e);
}
},
down: function(e){
var e = window.event || e;
y1 = e.y || e.pageY;
y2 = parseInt(this.trigger.style.top);
this.dis = (y1 - y2);
this.flag = true;
this.move(e);
},
move: function(e){
if(!this.flag) return;
var e = window.event || e;
y1 = e.y || e.pageY;
dis = Math.min(Math.max(y1 - this.dis, 0), (this.panelHeight - this.triggerHeight));
this.slider.style.top = -dis * this.k + 'px';
this.trigger.style.top = dis + 'px';
},
up: function(){
this.flag = false;
},
wheel: function(){
}
}
var ss = new customBar(oSlider, oPanel, oTrigger);
</script>
</body>
</html>

JavaScript-实现滚动条的更多相关文章

  1. javascript自定义滚动条插件,几行代码的事儿

    在实际项目中,经常由于浏览器自带的滚动条样式太戳,而且在各个浏览器中显示不一样,所以我们不得不去实现自定义的滚动条,今天我就用最少的代码实现了一个自定义滚动条,代码量区区只有几十行,使用起来也非常方便 ...

  2. 原声JavaScript实现滚动条·改1

    修正了获取元素相对视口左距离的逻辑问题(之前的函数实际获取的是相对于页面左距离).去除了调试时忘记删除的mouseleave事件.将创建滚动条的功能单独列为一个函数. 添加了鼠标点在滚动条什么位置,就 ...

  3. javascript实现 滚动条滚动 加载内容

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 【转】Selenium 利用javascript 控制滚动条

    http://luyongxin88.blog.163.com/blog/static/92558072011101913013149/ < xmlnamespace prefix =" ...

  5. javascript 获取滚动条高度+常用js页面宽度与高度

    /******************** * 取窗口滚动条高度  ******************/function getScrollTop(){    var scrollTop=0;    ...

  6. 原生JavaScript实现滚动条

    没事找事,明明overflow:scroll|auto就可以,只是难看点(实际上css也能设置).只当练习写拖拽.监听事件.位置检测了. 原理是对滑动条块进行监听,按下鼠标按键后,监听鼠标移动,然后根 ...

  7. javascript 获取滚动条高度+常用js页面宽度与高度(转)

    /******************** *获取窗口滚动条高度 ******************/ function getScrollTop() { var scrollTop=0; if(d ...

  8. javascript控制滚动条的位置,获取控件的位置

    一.如下是定位鼠标在视窗中的位置,先定位视窗和页面直接的距离. function getMousePoint() { var point = {x:0,y:0}; // 如果浏览器支持 pageYOf ...

  9. javascript获取滚动条位置(兼容所有浏览器)

    有两种方式来获取浏览器滚动条的位置 第一种:document.documentElement.scrollTop 第二种:$("body").scrollTop() 第一种方式能够 ...

  10. 闲扯 Javascript 04 滚动条

    物体运动基础 让Div移动起来 offsetLeft的作用 用定时器让物体连续移动 效果原理 让ul一直向左移动 复制li innerHTML和+= 修改ul的width 滚动过界后,重设位置 判断过 ...

随机推荐

  1. Fine Uploader + Spring3.2.2(Java+html5上传) SpringMVC+jquery-fineuploader 文件上传

    需求:要实现多文件上传,且要支持手机等移动设备... springmvc文件上传真头疼,网上搜了半天没发现都是TMD的用submit按钮提交到后台的,就没有插件的吗?最后发现了fineUploader ...

  2. spring boot注解 --@spring-boot-devtools 自动加载修改的文件和类

    spriing boot中有一个注解,是自动加载修改后的类或者文件. 使用方法为: spring-boot-devtools=true 需要引入devtools包依赖: <dependency& ...

  3. dubbo培训文档

    培训文档 1.<服务框架实践与探索> 主题:QCon2011杭州主题演讲,分享Dubbo服务框架的实践历程.主讲:钱霄,梁飞课件:Service Framework Practices.p ...

  4. bashrc和profile的用途和区别

    使用终端登录Linux操作系统的控制台后,会出现一个提示符号(例如:#或~),在这个提示符号之后可以输入命令,Linux根据输入的命令会做回应,这一连串的动作是由一个所谓的Shell来做处理. She ...

  5. CentOS 加载/挂载 U盘 (转)

    原文链接:CentOS 加载/挂载 U盘 Linux如何加载(优)U盘 1,以root用户登陆    先加载USB模块 modprobe usb-storage    用fdisk -l 看看U盘的设 ...

  6. OpenCV学习(34) 点到轮廓的距离

    在OpenCV中,可以很方便的计算一个像素点到轮廓的距离,计算距离的函数为: double pointPolygonTest(InputArray contour, Point2f pt, bool ...

  7. Informatica 常用组件Source Qualifier之八 会话前和会话后 SQL

      可以在源限定符转换的"属性"选项卡中添加会话前和会话后 SQL 命令.您可能要使用会话前 SQL 以在会话开始时将时间标识行写入源表. PowerCenter 在读取源之前对源 ...

  8. 如何处理wordpress首页不显示指定分类文章

    如何实现wordpress首页不显示指定分类文章,要实现这一步,首先必须找到需要屏蔽的该目录的id,那么如何查看wordpress的分类id呢?有两种方法: 通过wordpress后台查看分类的ID ...

  9. 关于DLL文件和EXE文件不在同一目录下的设置【转】

    https://www.cnblogs.com/chaosimple/archive/2012/08/13/2636181.html 关于DLL文件和EXE文件不在同一目录下的设置 在开发程序结束后, ...

  10. 一次真实的蓝屏分析 ntkrnlmp.exe

    故事背景: 话说我一直都是远程公司的电脑,在我晚上11点敲代码敲得正爽的时候,被远程的主机挂掉了,毫无征兆的挂掉了,我特么还好有闲着没事就ctrl + s保存代码的习惯,要不然白敲了那么久,我以为是公 ...