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 相关文章推荐
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
JS数字抽奖游戏实现方法
May 04 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
纯js实现手风琴效果代码
Apr 17 Javascript
详解JavaScript中this的指向问题
Jan 20 Javascript
使用 Vue.js 仿百度搜索框的实例代码
May 09 Javascript
JavaScript适配器模式详解
Oct 19 Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
解决Echarts2竖直datazoom滑动后显示数据不全的问题
Jul 20 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
Aug 13 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
PHPMailer安装方法及简单实例
2008/11/25 PHP
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP中对缓冲区的控制实现代码
2013/09/29 PHP
php中debug_backtrace、debug_print_backtrace和匿名函数用法实例
2014/12/01 PHP
PHP getallheaders无法获取自定义头(headers)的问题
2016/03/23 PHP
28个JS验证函数收集
2010/03/02 Javascript
js 回车提交表单两种实现方法
2012/12/31 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
javascript正则表达式之search()用法实例
2015/01/19 Javascript
使用AngularJS实现可伸缩的页面切换的方法
2015/06/19 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
jquery判断对象是否为空并遍历对象的简单实例
2016/07/26 Javascript
jQuery Ajax前后端使用JSON进行交互示例
2017/03/17 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
Angularjs的键盘事件的绑定
2017/07/27 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
jQuery实现简单弹幕效果
2019/11/28 jQuery
JavaScript监听键盘事件代码实现
2020/06/03 Javascript
使用Vant完成通知栏Notify的提示操作
2020/11/11 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[00:31]DOTA2荣耀之路7:Miracle-空血无敌斩
2018/05/31 DOTA
python多线程threading.Lock锁用法实例
2014/11/01 Python
python下paramiko模块实现ssh连接登录Linux服务器
2015/06/03 Python
Python修改MP3文件的方法
2015/06/15 Python
python3.5基于TCP实现文件传输
2020/03/20 Python
Python Web版语音合成实例详解
2019/07/16 Python
HTML5 拖放功能实现代码
2016/07/14 HTML / CSS
七年级历史教学反思
2014/02/05 职场文书
企业军训感言
2014/02/08 职场文书
绿色学校实施方案
2014/03/31 职场文书
餐饮服务食品安全责任书
2014/07/25 职场文书
行政专员岗位职责说明书
2014/07/30 职场文书
教师工作失职检讨书
2014/09/18 职场文书
个性发展自我评价2015
2015/03/09 职场文书
2015年万圣节活动总结
2015/03/24 职场文书