<!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. JAVA nio 2 和 Path 类简介

    想要初步了解 NIO.2 API,也就是通常所说的“JSR203: More New I/O APIs for the Java Platform”,最好的切入点就是新的抽象类 java.nio.fi ...

  2. Windows + IIS 环境部署Asp.Net Core App

    环境:Windows Server 2012, IIS 8, Asp.Net Core 1.1. 不少人第一次在IIS中部署Asp.Net Core App的人都会遇到问题,会发现原来的部署方式无法运 ...

  3. 【BZOJ】【1089】【SCOI2003】严格n元树

    高精度/递推 Orz Hzwer…… 然而我想多了…… 理解以后感觉黄学长的递推好精妙啊 顺便学到了一份高精度的板子= =233 引用下题解: f[i]=f[i-1]^n+1 ans=f[d]-f[d ...

  4. 《C和指针》整理一

    1.C语言的凝视     在C语言中,假设须要凝视掉一段代码.且代码中可能会已经存在/**/凝视形式,那么能够使用: #if 0     statements #endif     这样的形式来凝视掉 ...

  5. Objective-C：除数为0的情况下异常的处理(检测、抛出、捕捉、处理)

    // DivTest.h // 异常的处理 // // Created by ma c on 15/8/11. // Copyright (c) 2015年. All rights reserved. ...

  6. Cesium随笔（2）加载天地图地图服务【转】

    Cesium自带的图层是bing地图和esri,mapbox等图层,木有中文注记,想加载中文注记的图层?废话不说,上代码: var viewer = new Cesium.Viewer('cesium ...

  7. [leetcode]Convert Sorted Array to Binary Search Tree @ Python

    原题地址:http://oj.leetcode.com/problems/convert-sorted-array-to-binary-search-tree/ 题意:将一个排序好的数组转换为一颗二叉 ...

  8. request和request.form和request.querystring的区别

    asp中获取传递的参数,一般用request或者用request成员函数request.form,两种方式都可以获取页面表单传递过来的参数值,一直没留意两种方法有什么区别,我一般喜欢用request( ...

  9. Android数据展示之ListView

    Android应用程序中经常需要使用ListView展示数据,一个ListView通常将数据填充到布局文件中,在填充的过程中需要知道连接数据与ListView的适配器.适配器是一个连接数据和Adapt ...

  10. 两个JS对象怎样才能相等

    在JS中,两个对象如何才能相等?下面的两个 Alert,只有一个输出true.  在JS中如何才能构造出两个JS对象相等? var prop1 = {asd:{def:'abc'}}; var pro ...