<!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. Using platform encoding (GBK actually) to copy filtered resources, i.e. build is platform dependent!

    执行Maven Install打包的时候,提示以下警告信息: [WARNING] Using platform encoding (GBK actually) to copy filtered res ...

  2. Ubuntu安装Oracle时出现乱码,及其他安装错误

    只要在运行./runInstaller之前先运行下以下命令就ok了: export LANG=en_US #设置运行语言 编译错误 ln -s /usr/lib/i386-linux-gnu/libp ...

  3. [GIT] Git 工作流程(Git flow, Github flow flow, Git lab flow)

    reference : http://www.ruanyifeng.com/blog/2015/12/git-workflow.html Git 作为一个源码管理系统,不可避免涉及到多人协作. 协作必 ...

  4. [转]C++之多态性与虚函数

    面向对象程序设计中的多态性是指向不同的对象发送同一个消息,不同对象对应同一消息产生不同行为.在程序中消息就是调用函数,不同的行为就是指不同的实现方法,即执行不同的函数体.也可以这样说就是实现了“一个接 ...

  5. UEFI+GPT引导基础篇 ：什么是GPT，什么是UEFI？

    GUID Partition Table (GPT) is a standard for the layout of the partition table on a physical storage ...

  6. Objective-C:用命令行参数的格式对文件进行IO操作

    // main.m // 03-copyFile // Created by ma c on 15/8/24. // Copyright (c) 2015年. All rights reserved. ...

  7. Facade 门面模式 封装 MD

    门面模式 简介 作用:封装系统功能,简化系统调用 门面模式要求一个系统的外部与其内部的通信必须通过一个统一的门面(Facade)对象进行.门面模式提供一个高层次的接口,使得系统更易于使用. 门面模式的 ...

  8. 使用WPF来创建 Metro UI

    当我第一次运行Zune时,我为这些美丽的UI所折服.当时就说这肯定不是用WPF做的,因为这些字体是如此的清晰而且UI反映的也非常快速..而且我从维基百科上也了解到Zune的第一个版本是2006年发布的 ...

  9. jQuery的搜索关键词自动匹配插件

    相信许多人都会用过搜索栏自动匹配关键词的功能,无论是像google的专业搜索引擎,还是普通的网站,现在许多都用上了这种关键词匹配技术,本文介绍的用jQuery实现的关键词匹配技术,当然要整合到自己的系 ...

  10. Android -- 在ScrollView中嵌套ListView

    在做一个工程,这个工程的布局可以相当的复杂,最外面是ScrollView,在ScrollView里面有两个Listview,这下好了,布局出来了,放在机子上跑,卡得想死有木有,信息乱跑乱出现,表示非常 ...