<!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. Error while loading shared libraries: libpq.so.5: cannot open shared object file: No such file or directory

    32位系统:ln -s /opt/base/3.3/lib/libpq.so.5 /usr/lib/libpq.so.5 64位系统:ln -s /opt/base/3.3/lib/libpq.so. ...

  2. C结构体

    什么是结构体? 简单的来说,结构体就是个能够包含不同数据类型的一个结构,他是一种能够自己定义的数据类型,他的特点和数组主要有两点不同,首先结构体能够在一个结构中声明不同的数据类型,第二相同结构的结构体 ...

  3. 简明python教程 --C++程序员的视角（五）：面向对象的编程

    面向对象的编程 在大多数时候你可以使用过程性编程,但是有些时候当你想要编写大型程序或是寻求一个更加合适的解决方案的时候,你就得使用面向对象的编程技术. 对象可以使用普通的属于对象的变量存储数据.属于一 ...

  4. Guava Files 源码分析(二)

    createTempDir()之后就没有什么有意思的函数了,基本上都是对Java IO函数操作的聚合,只看一个simplifyPath() /** * Returns the lexically cl ...

  5. Informatica 常用组件Lookup缓存之四 使用不高速缓存的查找或静态高速缓存

    默认情况下,在为高速缓存配置查找转换时,PowerCenter 将创建静态查找高速缓存.PowerCenter 将在处理第一个查找请求时创建高速缓存.它将根据查找条件为传递给转换的每行查询高速缓存.P ...

  6. STL队列 之FIFO队列(queue)、优先队列(priority_queue)、双端队列(deque)

    1.FIFO队列   std::queue就是普通意思上的FIFO队列在STL中的模版. 1.1主要的方法有: (1)T front():访问队列的对头元素,并不删除对头元素 (2)T back(): ...

  7. mahout源码分析之DistributedLanczosSolver（五）Job over

    Mahout版本:0.7,hadoop版本:1.0.4,jdk:1.7.0_25 64bit. 1. Job 篇 接上篇,分析到EigenVerificationJob的run方法: public i ...

  8. go语言之进阶篇方法面向过程和对象函数的区别

    1.方法 (method) 在面向对象编程中,一个对象其实也就是一个简单的值或者一个变量,在这个对象中会包含一些函数,这种带有接收者的函数,我们称为方法(method). 本质上,一个方法则是一个和特 ...

  9. EventBus 事件总线 原理 MD

    Markdown版本笔记 我的GitHub首页 我的博客 我的微信 我的邮箱 MyAndroidBlogs baiqiantao baiqiantao bqt20094 baiqiantao@sina ...

  10. Spark踩坑记：共享变量

    收录待用,修改转载已取得腾讯云授权 前言 前面总结的几篇spark踩坑博文中,我总结了自己在使用spark过程当中踩过的一些坑和经验.我们知道Spark是多机器集群部署的,分为Driver/Maste ...