JQuery+DIV自定义滚动条样式的具体实现


Posted in Javascript onJune 25, 2013

JQuery计算滚动条长度和位置,代码如下:

javascript

<script type="text/javascript">
    var scrMinHeight = 1; //滚动条最小高度
    var scrMaxHeight = 0; //滚动条最大高度
    var scrDefualtTop = 80; //滚动条默认位置
    var scrHeight = 0;
    //初始化滚动条
    function InitScroll() {
        scrMaxHeight = $("#mainScrollContent").height(); //文本框高度
        scrHeight = document.getElementById("mainScrollContent").scrollHeight; //滚动文本高度
        scrHeight = parseInt((scrMaxHeight / scrHeight) * scrMaxHeight);
        if (scrHeight <= scrMinHeight) { scrHeight = scrMinHeight; }
        if (scrHeight >= scrMaxHeight) { $("#scrollContent").hide(); }
        else {
            $("#scrollContent").show();
            $("#scrollContent .tiao_mid").css("height", (scrHeight - 19) + "px");
        }
    }
    $(document).ready(function () {
        $(".bod").height(($(document).height() - 80) + "px");
        $("#mainScrollContent").height(($(document).height() - 125) + "px");
        scrMaxHeight = ($(document).height() - 125); //滚动条最大高度
        $("#scrollBody").height(($(document).height() - 125) + "px");
        $("#scrollBodyBack").height(($(document).height() - 125) + "px");
        InitScroll();
        $("#mainScrollContent").scroll(function () {
            ChangeScroll();
        });
        var y1 = 0;
        $("#scrollContent").mousedown(function (event) {
            var scrContentTop = $("#scrollContent").css("top");
            y1 = event.clientY - parseInt(scrContentTop.replace("px", ""));
            $("#scrollContent").mousemove(function (event) {
                if ((event.clientY - y1) < scrDefualtTop) {
                    $("#scrollContent").css("top", scrDefualtTop + "px");
                }
                else if ((event.clientY - y1) > (scrDefualtTop + scrMaxHeight - scrHeight)) {
                    $("#scrollContent").css("top", (scrDefualtTop + scrMaxHeight - scrHeight) + "px");
                }
                else {
                    $("#scrollContent").css("top", (event.clientY - y1) + "px");
                }
                ChangeScrollContent();
            });
        }).mouseup(function () {
            $("#scrollContent").unbind("mousemove");
        }).mouseout(function () {
            $("#scrollContent").unbind("mousemove");
        });
    });
    //改变滚动内容位置
    function ChangeScrollContent() {
        var scrTop = $("#scrollContent").css("top");
        var st = parseInt(scrTop.replace("px", ""));
        st = ((st - scrDefualtTop) * document.getElementById("mainScrollContent").scrollHeight) / scrMaxHeight
        $("#mainScrollContent").scrollTop(st); //滚动的高度
    }
    //改变滚动条位置
    function ChangeScroll() {
        var scrTop = $("#mainScrollContent").scrollTop(); //滚动的高度
        scrTop = (scrTop * scrMaxHeight) / document.getElementById("mainScrollContent").scrollHeight + scrDefualtTop;
        $("#scrollContent").css("top", scrTop + "px");
    }
    </script>

滚动区域内容DIV:
html

<div class="jtc_neir" id="Div1" style="height: 100px;">
    营业总收入:11.66亿元(同比增长-1.75%)
    <br />
    <a href="bank.aspx">dddd</a>净利润:0.19亿元(同比增长23.72%)
    <br />
    每股收益:0.04元
    <br />
    净资产收益率:1.58%
    <br />
    毛利率:12.22%(同比增长39.89%)
    <br />
    总资产:30.46亿元(同比增长-7.14%)<br />
    as大苏打撒旦撒
    <br />
    阿斯蒂芬多个地方营业总收入:11.66亿元(同比增长-1.75%)
    <br />
    净利润:0.19亿元(同比增长23.72%)
    <br />
    每股收益:0.04元
    <br />
    净资产收益率:1.58%
    <br />
    毛利率:12.22%(同比增长39.89%)
    <br />
    总资产:30.46亿元(同比增长-7.14%)<br />
    as大苏打撒旦撒
    <br />
    阿斯蒂芬多个地方营业总收入:11.66亿元(同比增长-1.75%)
    <br />
    净利润:0.19亿元(同比增长23.72%)
    <br />
    每股收益:0.04元
    <br />
    净资产收益率:1.58%
    <br />
    毛利率:12.22%(同比增长39.89%)
    <br />
    总资产:30.46亿元(同比增长-7.14%)<br />
    as大苏打撒旦撒
    <br />
    阿斯蒂芬多个地方营业总收入:11.66亿元(同比增长-1.75%)
    <br />
    净利润:0.19亿元(同比增长23.72%)
    <br />
    每股收益:0.04元
    <br />
    净资产收益率:1.58%
    <br />
    毛利率:12.22%(同比增长39.89%)
    <br />
    总资产:30.46亿元(同比增长-7.14%)<br />
    as大苏打撒旦撒
    <br />
    阿斯蒂芬多个地方营业总收入:11.66亿元(同比增长-1.75%)
    <br />
    净利润:0.19亿元(同比增长23.72%)
    <br />
    每股收益:0.04元
    <br />
    净资产收益率:1.58%
    <br />
    毛利率:12.22%(同比增长39.89%)
    <br />
    总资产:30.46亿元(同比增长-7.14%)<br />
    as大苏打撒旦撒
    <br />
    阿斯蒂芬多个地方</div>
<div class="jtc_tiao" style="background-color: rgb(196,206,208); z-index: 2;" id="Div2">
</div>
<div class="jtc_tiao" style="background-color: rgb(222,222,222); z-index: 1; width: 16px;"
    id="Div3">
</div>
<div class="jtc_tiao" id="Div4">
    <div class="tiao_up">
    </div>
    <div class="tiao_mid">
    </div>
    <div class="tiao_bottom">
    </div>
</div>

主要样式:
css

.jtc_neir{margin-left:20px; margin-right:20px; color:#000000; font-size:12px; background:none; line-height:32px; overflow-y:scroll;overflow-x:hidden;  
          scrollbar-3dlight-color:rgb(222,222,222);  
    scrollbar-arrow-color:rgb(222,222,222);  
    scrollbar-base-color:rgb(222,222,222);  
    scrollbar-darkshadow-color:rgb(222,222,222);  
    scrollbar-face-color:rgb(222,222,222);  
    scrollbar-highlight-color:rgb(222,222,222);  
    scrollbar-shadow-color:rgb(222,222,222);}  .jtc_tiao{width:8px; position:absolute; top:80px; right:20px; z-index:10;}  
.tiao_up{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) left top no-repeat; line-height:0px; overflow:hidden;}  
.tiao_mid{width:8px; background:url(../images/scrollbar-3.jpg) -39px center  repeat-y; line-height:0px; overflow:hidden;}  
.tiao_bottom{width:8px; height:10px; background:url(../images/scrollbar-3.jpg) -13px bottom no-repeat;font-size:0; line-height:0px; overflow:hidden;} 
Javascript 相关文章推荐
用js得到网页中所有的div的id
Oct 19 Javascript
JavaScript 异步调用框架 (Part 4 - 链式调用)
Aug 04 Javascript
javascript 构造函数方式定义对象
Jan 02 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JS选取DOM元素的简单方法
Jul 08 Javascript
js实现楼层效果的简单实例
Jul 15 Javascript
浅谈JS中的bind方法与函数柯里化
Aug 10 Javascript
vue实现登陆登出的实现示例
Sep 15 Javascript
JS去掉字符串中所有的逗号
Oct 18 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 Javascript
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
javascript运行机制之执行顺序理解
Aug 03 Javascript
js循环改变div颜色具体方法
Jun 25 #Javascript
js点击更换背景颜色或图片的实例代码
Jun 25 #Javascript
js操作iframe的一些方法介绍
Jun 25 #Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 #Javascript
JQuery在页面中添加和除移DOM示例代码
Jun 24 #Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 #Javascript
js实现右下角可关闭最小化div(可用于展示推荐内容)
Jun 24 #Javascript
You might like
php批量删除数据
2007/01/18 PHP
快速配置PHPMyAdmin方法
2008/06/05 PHP
在JavaScript中调用php程序
2009/03/09 PHP
解析PHP中VC6 X86和VC9 X86的区别及 Non Thread Safe的意思
2013/06/28 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
php 函数使用可变数量的参数方法
2017/05/02 PHP
PHP命名空间namespace及use的简单用法分析
2018/08/03 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
通过jQuery源码学习javascript(二)
2012/12/27 Javascript
jquery实现页面图片等比例放大缩小功能
2014/02/12 Javascript
js仿腾讯QQ的web登陆界面
2016/08/19 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JS闭包与延迟求值用法示例
2016/12/22 Javascript
js实现复制功能(多种方法集合)
2018/01/06 Javascript
Node.js原生api搭建web服务器的方法步骤
2019/02/15 Javascript
layui的layedit富文本赋值方法
2019/09/18 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
解决python3 urllib 链接中有中文的问题
2018/07/16 Python
flask-restful使用总结
2018/12/04 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
python的命名规则知识点总结
2019/10/04 Python
python线程join方法原理解析
2020/02/11 Python
python实现企业微信定时发送文本消息的示例代码
2020/11/24 Python
浅析pandas随机排列与随机抽样
2021/01/22 Python
100%植物性、有机、即食餐:Sakara Life
2018/10/25 全球购物
卫校中专生个人自我评价
2013/09/19 职场文书
酒店总经理助理岗位职责
2014/02/01 职场文书
日语专业个人求职信范文
2014/02/02 职场文书
个人四风问题整改措施思想汇报
2014/10/04 职场文书
小学校园广播稿
2015/08/18 职场文书
导游词之崇武古城
2019/10/07 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
Vue实现动态查询规则生成组件
2021/05/27 Vue.js