<!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. DTree的改进与使用经验

    1.dtree.js源码 function Node(id, pid, name, url, title, target, icon, iconOpen, open) { this.id = id; ...

  2. zookeeper 伪分布式安装

    1 下载zookeeper安装包 下载地址 http://apache.fayea.com/zookeeper/ 我下载的是zookeeper-3.4.6.tar.gz 2 解压缩 将zookeepe ...

  3. 计算Fisher vector和VLAD

    This short tutorial shows how to compute Fisher vector and VLAD encodings with VLFeat MATLAB interfa ...

  4. sqlalchemy批量删除数据、全量删除

    问题:sqlalchemy如何批量删除多条数据解决:使用参数synchronize_session=False,或for循环方法:        users = self.db.query(User) ...

  5. 第三章 mybatis-generator + mysql/ptsql

    用了mybatis-generator,我就不再想用注解了,这与我之前说的注解与XML并用是矛盾的,知识嘛,本来就是多元化的,今天喜欢这个,明天喜欢那个,哈哈,看了mybatis-generator下 ...

  6. Reverse Nodes in k-Group leetcode java

    题目: Given a linked list, reverse the nodes of a linked list k at a time and return its modified list ...

  7. PS使用技巧

    1. 3.缩放工具:工具栏上放大镜图标:<1>上面图标栏可以选择激活放大还是缩小.<2>按住alt键可以切换,可以点击,也可以滚动滚轮<3>ctrl加"+ ...

  8. 上传文件multipart form-data boundary 说明

    含义 ENCTYPE="multipart/form-data" 说明: 通过 http 协议上传文件 rfc1867协议概述,客户端发送内容构造. 概述              ...

  9. 给 TextBlock 加 ToolTip

    <TextBlock ToolTip="{Binding RelativeSource={RelativeSource Self},Path=Text}" Text=&quo ...

  10. BFC是什么

    BFC 已经是一个耳听熟闻的词语了,网上有许多关于 BFC 的文章,介绍了如何触发 BFC 以及 BFC 的一些用处(如清浮动,防止 margin 重叠等).虽然我知道如何利用 BFC 解决这些问题, ...