用户注册



邮箱：

密码：

用户登录


邮箱：

密码：
记住登录一个月忘记密码？

发表随想


还能输入：200字
云代码 - javascript代码库

简单的自定义滚动条样式插件：jScrollPane

2015-01-05 作者： 十口冂二举报

[javascript]代码库

view sourceprint?
官网：http://jscrollpane.kelvinluck.com/
 
 
引入相关文件：
    <link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />//插件自带滚动条样式文件
    <script type="text/javascript" src="jquery.min.js"></script>
    <script type="text/javascript" src="jquery.mousewheel.js"></script>
    <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
    <script type="text/javascript">
        $(function(){
            $('.scroll-pane').jScrollPane(); //调用的名称为外部显示滚动条的DIV
        })
    </script>
 
 
HTML:
    <div class="scroll-pane" style="height:300px;width:500px;overflow:auto;">//此DIV显示滚动条
        <div id="#cont" style="height:3000px;width:100%;"></div>
    </div>
 
 
jquery.jscrollpane.css内部样式：
.jspContainer
{
    overflow: hidden;
    position: relative;
}
 
.jspPane
{
    position: absolute;
}
 
/*整体样式*/
.jspVerticalBar
{
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 100%;
}
 
.jspHorizontalBar
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 16px;
    background: red;
}
 
.jspCap
{
    display: none;
}
 
.jspHorizontalBar .jspCap
{
    float: left;
}
 
/*滚动条底条样式*/
.jspTrack
{
    background: #fff;
    position: relative;
    width: 3px;
}
 
/*滚动条滑动块样式*/
.jspDrag
{
    background: #7db5fa;
    position: relative;
    top: 0;
    left: 0;
    width: 16px;
    margin-left: -6px;
    cursor: pointer;
}
 
.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag
{
    float: left;
    height: 100%;
}
 
.jspArrow
{
    background: #50506d;
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    padding: 0;
    margin: 0;
}
 
.jspArrow.jspDisabled
{
    cursor: default;
    background: #80808d;
}
 
.jspVerticalBar .jspArrow
{
    height: 16px;
}
 
.jspHorizontalBar .jspArrow
{
    width: 16px;
    float: left;
    height: 100%;
}
 
.jspVerticalBar .jspArrow:focus
{
    outline: none;
}
 
.jspCorner
{
    background: #eeeef4;
    float: left;
    height: 100%;
}

[代码运行效果截图]


简单的自定义滚动条样式插件：jScrollPane

[源代码打包下载]




网友评论    (发表评论)


发表评论：

评论须知：

  • 1、评论每次加2分，每天上限为30；
  • 2、请文明用语，共同创建干净的技术交流环境；
  • 3、若被发现提交非法信息，评论将会被删除，并且给予扣分处理，严重者给予封号处理；
  • 4、请勿发布广告信息或其他无关评论，否则将会删除评论并扣分，严重者给予封号处理。


扫码下载

加载中，请稍后...

输入口令后可复制整站源码

加载中，请稍后...