<!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. 计算一元一次方程Y=kX+b

    开发过程中用不到一元一次方程吗?非也,iOS开发中经常会遇到根据某个ScrollView动态偏移量的值来实时设置一个View的透明度,你敢说你不用一元一次方程你能搞定? 想把一个动画效果做好,经常会遇 ...

  2. Tomcat 7 的七大新特性

    英文原文:Top 7 Features in Tomcat 7: The New and the Improved Tomcat的7引入了许多新功能,并对现有功能进行了增强.很多文章列出了Tomcat ...

  3. 收藏的iOS技术站点汇总(持续更新ing)

    大牛博客 objc.io PS:经典,内容深而广 objc中国 NSHipster PS:非常多小细节 NSHipster 中文版 唐巧的技术博客 PS:LZ是唐巧的脑残粉- OneV's Den 王 ...

  4. Android Protobuf应用及原理

    前言 之前一直忙于移动端日志SDK Trojan的开源工作,已十分稳定地运行在饿了么团队App中,集成了日志加密和解密功能.哎呀,允许我卖个狗皮膏药,不用不知道,用了就知道,从此爱不释手,Trojan ...

  5. 论文神器Latex30分钟快速入门教程-只需9步向学神看齐

    小E说:工欲善其事,必先利其器.立志做个安静的美学霸的你,学会Latex,一定能使你的论文写作事半功倍. 1.LaTeX软件的安装和使用 方法A(自助):在MikTeX的官网下载免费的MikTeX编译 ...

  6. 3维DEMO: 抽奖圆盘

    抽奖圆盘 前些日子去超市,消费满一定钱数可以参加抽奖,就是在电视机上有个可旋转的圆盘,按一键开始,按一键抽奖结束.看到最大奖的扇形区域大约有个10度角的样子,按说中大奖的概率应该是36分之1.当然,这 ...

  7. java之 22天 GUI 图形界面编程(一)

    转自:http://takeme.iteye.com/blog/1876850 GUI(图形用户界面) import java.awt.Button; import java.awt.FlowLayo ...

  8. oralce sql 分页

    create table student ( sid varchar2(10), --学号 sname varchar2(10), --姓名 classid varchar2(10), --班级号 s ...

  9. Multi-label && Multi-label classification

    Multi-label classification with Keras In today’s blog post you learned how to perform multi-label cl ...

  10. Android组件之自定义ContentProvider

    Android的数据存储有五种方式Shared Preferences.网络存储.文件存储.外储存储.SQLite,一般这些存储都只是在单独的一个应用程序之中达到一个数据的共享,有时候我们需要操作其他 ...