Code666 (代码贴、代码片段)

[JavaScript] 简单的自定义滚动条样式插件：jScrollPane →→→→→进入此内容的聊天室

来自 , 2020-12-18, 写在 JavaScript, 查看 127 次.
URL http://www.code666.cn/view/685ac8ca
  1. 官网：http://jscrollpane.kelvinluck.com/
  2.  
  3.  
  4. 引入相关文件：
  5.         <link type="text/css" href="jquery.jscrollpane.css" rel="stylesheet" media="all" />//插件自带滚动条样式文件
  6.         <script type="text/javascript" src="jquery.min.js"></script>
  7.         <script type="text/javascript" src="jquery.mousewheel.js"></script>
  8.         <script type="text/javascript" src="jquery.jscrollpane.min.js"></script>
  9.         <script type="text/javascript">
  10.                 $(function(){
  11.                         $('.scroll-pane').jScrollPane(); //调用的名称为外部显示滚动条的DIV
  12.                 })
  13.         </script>
  14.  
  15.  
  16. HTML:
  17.         <div class="scroll-pane" style="height:300px;width:500px;overflow:auto;">//此DIV显示滚动条
  18.                 <div id="#cont" style="height:3000px;width:100%;"></div>
  19.         </div>
  20.  
  21.  
  22. jquery.jscrollpane.css内部样式：
  23. .jspContainer
  24. {
  25.         overflow: hidden;
  26.         position: relative;
  27. }
  28.  
  29. .jspPane
  30. {
  31.         position: absolute;
  32. }
  33.  
  34. /*整体样式*/
  35. .jspVerticalBar
  36. {
  37.         position: absolute;
  38.         top: 0;
  39.         right: 0;
  40.         width: 16px;
  41.         height: 100%;
  42. }
  43.  
  44. .jspHorizontalBar
  45. {
  46.         position: absolute;
  47.         bottom: 0;
  48.         left: 0;
  49.         width: 100%;
  50.         height: 16px;
  51.         background: red;
  52. }
  53.  
  54. .jspCap
  55. {
  56.         display: none;
  57. }
  58.  
  59. .jspHorizontalBar .jspCap
  60. {
  61.         float: left;
  62. }
  63.  
  64. /*滚动条底条样式*/
  65. .jspTrack
  66. {
  67.         background: #fff;
  68.         position: relative;
  69.         width: 3px;
  70. }
  71.  
  72. /*滚动条滑动块样式*/
  73. .jspDrag
  74. {
  75.         background: #7db5fa;
  76.         position: relative;
  77.         top: 0;
  78.         left: 0;
  79.         width: 16px;
  80.         margin-left: -6px;
  81.         cursor: pointer;
  82. }
  83.  
  84. .jspHorizontalBar .jspTrack,
  85. .jspHorizontalBar .jspDrag
  86. {
  87.         float: left;
  88.         height: 100%;
  89. }
  90.  
  91. .jspArrow
  92. {
  93.         background: #50506d;
  94.         text-indent: -20000px;
  95.         display: block;
  96.         cursor: pointer;
  97.         padding: 0;
  98.         margin: 0;
  99. }
  100.  
  101. .jspArrow.jspDisabled
  102. {
  103.         cursor: default;
  104.         background: #80808d;
  105. }
  106.  
  107. .jspVerticalBar .jspArrow
  108. {
  109.         height: 16px;
  110. }
  111.  
  112. .jspHorizontalBar .jspArrow
  113. {
  114.         width: 16px;
  115.         float: left;
  116.         height: 100%;
  117. }
  118.  
  119. .jspVerticalBar .jspArrow:focus
  120. {
  121.         outline: none;
  122. }
  123.  
  124. .jspCorner
  125. {
  126.         background: #eeeef4;
  127.         float: left;
  128.         height: 100%;
  129. }

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

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666