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 prototype 格式化数字 By shawl.qiu
Apr 02 Javascript
Jquery升级新版本后选择器的语法问题
Jun 02 Javascript
40个有创意的jQuery图片、内容滑动及弹出插件收藏集之一
Dec 31 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
JavaScript面向对象编程入门教程
Apr 16 Javascript
JavaScript获取table中某一列的值的方法
May 06 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
javascript事件处理模型实例说明
May 31 Javascript
Javascript的比较汇总
Jul 25 Javascript
javascript实现电商放大镜效果
Nov 23 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
Dec 10 Vue.js
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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/03/03 PHP
PHP 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
PHP截取指定图片大小的方法
2014/12/10 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
Javascript 学习笔记之 对象篇(二) : 原型对象
2014/06/24 Javascript
如何使用jquery修改css中带有!important的样式属性
2016/04/28 Javascript
jQuery与JavaScript节点创建方法的对比
2016/11/18 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
2018/04/08 Javascript
详解Element 指令clickoutside源码分析
2019/02/15 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
Angular8 Http拦截器简单使用教程
2019/08/20 Javascript
深入浅析JavaScript中的in关键字和for-in循环
2020/04/20 Javascript
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
Python匿名函数及应用示例
2019/04/09 Python
python判断链表是否有环的实例代码
2020/01/31 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
python实现简单学生信息管理系统
2020/04/09 Python
Python 实现一行输入多个数字(用空格隔开)
2020/04/29 Python
html5 canvas实现给图片添加平铺水印
2019/08/20 HTML / CSS
H5 video poster属性设置视频封面的方法
2020/05/25 HTML / CSS
来自世界各地的饮料:Flavourly
2019/05/06 全球购物
白俄罗斯女装和针织品网上商店:Presli.by
2019/10/13 全球购物
美国工业用品采购网站:Zoro.com
2020/10/27 全球购物
意大利辅助药品、药物和补品在线销售:FarmaEurope
2020/04/29 全球购物
请解释流与文件有什么不同
2016/07/29 面试题
餐饮总经理岗位职责
2014/03/07 职场文书
五四青年节演讲稿
2014/05/26 职场文书
英语系毕业生求职信
2014/07/13 职场文书
成绩单评语
2015/01/04 职场文书
2015年公司行政后勤工作总结
2015/05/20 职场文书
《辉夜大小姐想让我告白》第三季正式预告
2022/03/20 日漫
Win10 heic文件怎么打开 ? Win10 heic文件打开教程
2022/04/06 数码科技
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers