码上快乐

相关内容   简体   繁体

div滚动条样式设计

本文转载自  查看原文  2012-02-04 12:51  9380 

这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦

例1：

div滚动条
 

代码列表从左边到右边（上到下）
（1）

  1. <div style="width: 120; height: 140; background-color: #0000c6; overflow: scroll; scrollbar-face-color:#70807d; scrollbar-arrow-color:#ffffff; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#70807d; scrollbar-shadow-color:#ffffff; scrollbar-darkshadow-color:#70807d; scrollbar-track-color:#ffffff"> 
  2. 文字内容  
  3. </div> 

（2）

  1. track-color:#ffff33; scrollbar-darkshadow-color:#ffff33; scrollbar-face-color:#ff0033; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff0033"> 
  2. 文字内容  
  3. </div> 


（3）

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-3dlight-color:#ff0033; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffff33; scrollbar-darkshadow-color:#ffff33; scrollbar-face-color:#ff0033; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#ff0033"> 
  2. 文字内容  
  3. </div> 


（4）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: eaecec; scrollbar-highlight-color: eaecec; scrollbar-shadow-color: black; scrollbar-3dlight-color: eaecec; scrollbar-arrow-color: eaecec; scrollbar-track-color: ffffff; scrollbar-darkshadow-color: eaecec"> 
  2. 文字内容  
  3. </div> 

（5）
 

  1. <div style="width: 120; height: 140;overflow: scroll; scrollbar-3dlight-color:#595959; scrollbar-arrow-color:#ffffff; scrollbar-base-color:#cfcfcf; scrollbar-darkshadow-color:#ffffff; scrollbar-face-color:#cfcfcf; scrollbar-highlight-color:#ffffff; scrollbar-shadow-color:#595959"> 
  2. 文字内容  
  3. </div> 

（6）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #d2e5f4; scrollbar-highlight-color: #d2e5f4; scrollbar-3dlight-color: #ffffff; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #d2e5f4"> 
  2. 文字内容  
  3. </div> 

（7）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-face-color: #d9d9d9; scrollbar-3dlight-color: #d9d9d9; scrollbar-darkshadow-color: #d9d9d9; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff"> 
  2. 文字内容  
  3. </div> 

（8）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-arrow-color: #ffffff; scrollbar-face-color: #59adbb; scrollbar-track-color: #ffffff; scrollbar-3dlight-color: #59adbb; scrollbar-darkshadow-color: #59adbb"> 
  2. 文字内容  
  3. </div> 

（9）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #ffc300; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #ffc300; scrollbar-darkshadow-color: #ffffff; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffc300"> 
  2. 文字内容  
  3. </div> 

（10）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-3dlight-color:5a5227; scrollbar-arrow-color:fff8c5; scrollbar-base-color:ddd38d; scrollbar-darkshadow-color:fff8c5; scrollbar-face-color:ddd38d; scrollbar-highlight-color:fff8c5; scrollbar-shadow-color:5a5227"> 
  2. 文字内容  
  3. </div> 

（11）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #9ebfe8; scrollbar-shadow-color: #ffffff; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #9ebfe8; scrollbar-darkshadow-color: #9ebfe8; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #ffffff"> 
  2. 文字内容  
  3. </div> 

（12）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #db52bc; scrollbar-shadow-color: #e994d6; scrollbar-highlight-color: #e994d6; scrollbar-3dlight-color: #db52bc; scrollbar-darkshadow-color: #db52bc; scrollbar-track-color: #e994d6; scrollbar-arrow-color: #ffffff"> 
  2. 文字内容  
  3. </div> 

（13）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #666666; scrollbar-3dlight-color: #101010; scrollbar-darkshadow-color: #070707; scrollbar-track-color: #101010; scrollbar-arrow-color: #000000"> 
  2. 文字内容  
  3. </div> 

（14）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #333333; scrollbar-shadow-color: #808080; scrollbar-highlight-color: #333333; scrollbar-3dlight-color: #808080; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #191919; scrollbar-arrow-color: #cccccc"> 
  2. 文字内容  
  3. </div> 

（15）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color:#ffc4e1; scrollbar-highlight-color:#ffffff; scrollbar-3dlight-color:#ff95ca; scrollbar-darkshadow-color:#ffb5da; scrollbar-shadow-color:#ff6ab5; scrollbar-arrow-color:#ffffff; scrollbar-track-color:#ffddee"> 
  2. 文字内容  
  3. </div> 

（16）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #dbebfe; scrollbar-shadow-color: #b8d6fa; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #dbebfe; scrollbar-darkshadow-color:#458ce4; scrollbar-track-color: #ffffff; scrollbar-arrow-color: #458ce4"> 
  2. 文字内容  
  3. </div> 

（17）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #ffffff; scrollbar-shadow-color: #885c10; scrollbar-highlight-color: #f8ecd8; scrollbar-3dlight-color: #885c10; scrollbar-darkshadow-color: #f8ecd8; scrollbar-track-color: #f8ecd8; scrollbar-arrow-color: #885c10"> 
  2. 文字内容  
  3. </div> 


（18）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #222222; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #222222; scrollbar-shadow-color: #ffffff; scrollbar-darkshadow-color: #222222; scrollbar-track-color: #222222; scrollbar-arrow-color: #222222"> 
  2. 文字内容  
  3. </div> 

（19）
 

  1. <div style="width: 120; height: 140; overflow: scroll; scrollbar-face-color: #fddee8; scrollbar-shadow-color: #fddee8; scrollbar-highlight-color: #ffffff; scrollbar-3dlight-color: #fdcfdd; scrollbar-darkshadow-color: #fdcfdd; scrollbar-track-color: fff6f9; scrollbar-arrow-color: #fea6c0"> 
  2. 文字内容  
  3. </div> 

例2：

div
  
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head> 
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  6. <title>带滚动条的Div</title> 
  7. <style type="text/css"> 
  8. body{  
  9. font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  
  10. }  
  11. p{  
  12. margin-top:0px;  
  13. }  
  14. #dhtmlgoodies_scrolldiv{  
  15. width:530px;  
  16. height:500px;  
  17. }  
  18. #scrolldiv_parentContainer{  
  19. width:500px;  
  20. height:100%;  
  21. overflow:hidden;  
  22. border:1px solid #BC8FBD;  
  23. float:left;  
  24. position:relative;  
  25. }  
  26. #scrolldiv_content{  
  27. padding: 5px;  
  28. position:relative;  
  29. font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;  
  30. font-size: 0.9em;  
  31. line-height:130%;  
  32. color: #333;  
  33. }  
  34.  
  35. #scrolldiv_slider{  
  36. width:15px;  
  37. margin-left:2px;  
  38. height:500px;  
  39. float:left;  
  40. }  
  41.  
  42. #scrolldiv_scrollbar{  
  43. width:15px;  
  44. height:460px;  
  45. border:1px solid #BC8FBD;  
  46. position:relative;  
  47.  
  48. }  
  49. #scrolldiv_theScroll{  
  50. margin:1px;  
  51. width:13px;  
  52. height:13px;  
  53. background-color:#BC8FBD;  
  54. position:absolute;   
  55. top:0px;  
  56. left:0px;  
  57. cursor:pointer;  
  58. }  
  59. #scrolldiv_scrollUp,#scrolldiv_scrollDown{  
  60. width:15px;  
  61. height:16px;  
  62. border:1px solid #BC8FBD;  
  63. color: #BC8FBD;  
  64. text-align:center;  
  65. font-size:16px;  
  66. line-height:16px;  
  67. cursor:pointer;  
  68. }  
  69. #scrolldiv_scrollUp{  
  70. margin-bottom:2px;  
  71. }  
  72. #scrolldiv_scrollDown{  
  73. margin-top:2px;  
  74. }  
  75. #scrolldiv_scrollDown span,#scrolldiv_scrollUp span{  
  76. font-family: Symbol;  
  77. }  
  78.  
  79. </style> 
  80. <script type="text/javascript"> 
  81. var contentHeight = 0;  
  82. var visibleContentHeight = 0;   
  83. var scrollActive = false;  
  84. var scrollHandleObj = false;  
  85. var scrollHandleHeight = false;  
  86. var scrollbarTop = false;  
  87. var eventYPos = false;  
  88. var scrollbuttonActive = false;  
  89. var scrollbuttonDirection = false;  
  90. var scrollbuttonSpeed = 2;  
  91. var scrollTimer = 10;   
  92. var scrollMoveToActive = false;  
  93. var scrollMoveToYPosition = false;  
  94. function scrollDiv_startScroll(e)  
  95. {  
  96. if(document.all)e = event;  
  97. scrollbarTop = document.getElementById('scrolldiv_theScroll').offsetTop;  
  98. eeventYPos = e.clientY;  
  99. scrollActive = true;  
  100. }  
  101.  
  102. function scrollDiv_stopScroll()  
  103. {  
  104. scrollActive = false;  
  105. scrollbuttonActive = false;  
  106. scrollMoveToActive = false;  
  107. }  
  108. function scrollDiv_scroll(e)  
  109. {  
  110. if(!scrollActive)return;  
  111. if(document.all)e = event;  
  112. if(e.button!=1 && document.all)return;  
  113. var topPos = scrollbarTop + e.clientY - eventYPos;   
  114. if(topPos<0)topPos=0;  
  115. if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1)topPos = visibleContentHeight-(scrollHandleHeight+4);  
  116. document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';  
  117. document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'   
  118. }  
  119. function scrolldiv_scrollMoveToInit(e)  
  120. {   
  121. if(document.all)e = event;  
  122. scrollMoveToActive = true;  
  123. scrollMoveToYPosition = e.clientY - document.getElementById('scrolldiv_scrollbar').offsetTop;  
  124. if(document.getElementById('scrolldiv_theScroll').offsetTop/1 > scrollMoveToYPosition) scrollbuttonDirection = scrollbuttonSpeed*-2; else scrollbuttonDirection = scrollbuttonSpeed*2;  
  125. scrolldiv_scrollMoveTo();   
  126. }  
  127.  
  128. function scrolldiv_scrollMoveTo()  
  129. {  
  130. if(!scrollMoveToActive || scrollActive)return;  
  131. var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');  
  132. topPostopPos = topPos/1 + scrollbuttonDirection;  
  133. if(topPos<0){  
  134. topPos=0;  
  135. scrollMoveToActive=false;  
  136. }  
  137. if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){  
  138. topPos = visibleContentHeight-(scrollHandleHeight+4);   
  139. scrollMoveToActive=false;  
  140. }  
  141. if(scrollbuttonDirection<0 && topPos<scrollMoveToYPosition-scrollHandleHeight/2)return;   
  142. if(scrollbuttonDirection>0 && topPos>scrollMoveToYPosition-scrollHandleHeight/2)return;   
  143. document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';  
  144. document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'   
  145. setTimeout('scrolldiv_scrollMoveTo()',scrollTimer);   
  146. }  
  147.  
  148. function cancelEvent()  
  149. {  
  150. return false;   
  151. }  
  152.  
  153. function scrolldiv_scrollButton()  
  154. {  
  155. if(this.id=='scrolldiv_scrollDown')scrollbuttonDirection = scrollbuttonSpeed; else scrollbuttonDirection = scrollbuttonSpeed*-1;  
  156. scrollbuttonActive=true;  
  157. scrolldiv_scrollButtonScroll();  
  158. }  
  159. function scrolldiv_scrollButtonScroll()  
  160. {  
  161. if(!scrollbuttonActive)return;  
  162. var topPos = document.getElementById('scrolldiv_theScroll').style.top.replace('px','');  
  163. topPostopPos = topPos/1 + scrollbuttonDirection;  
  164. if(topPos<0){  
  165. topPos=0;  
  166. scrollbuttonActive=false;  
  167. }  
  168. if(topPos/1>visibleContentHeight-(scrollHandleHeight+4)/1){  
  169. topPos = visibleContentHeight-(scrollHandleHeight+4);   
  170. scrollbuttonActive=false;  
  171. }   
  172. document.getElementById('scrolldiv_theScroll').style.top = topPos + 'px';  
  173. document.getElementById('scrolldiv_content').style.top = 0 - Math.floor((contentHeight) * ((topPos)/(visibleContentHeight-scrollHandleHeight)))+'px'   
  174. setTimeout('scrolldiv_scrollButtonScroll()',scrollTimer);  
  175. }  
  176. function scrolldiv_scrollButtonStop()  
  177. {  
  178. scrollbuttonActive = false;  
  179. }  
  180.  
  181.  
  182. function scrolldiv_initScroll()  
  183. {  
  184. visibleContentHeight = document.getElementById('scrolldiv_scrollbar').offsetHeight ;  
  185. contentHeight = document.getElementById('scrolldiv_content').offsetHeight - visibleContentHeight; scrollHandleObj = document.getElementById('scrolldiv_theScroll');  
  186. scrollHandleHeight = scrollHandleObj.offsetHeight;  
  187. scrollbarTop = document.getElementById('scrolldiv_scrollbar').offsetTop;   
  188. document.getElementById('scrolldiv_theScroll').onmousedown = scrollDiv_startScroll;  
  189. document.body.onmousemove = scrollDiv_scroll;  
  190. document.getElementById('scrolldiv_scrollbar').onselectstart = cancelEvent;  
  191. document.getElementById('scrolldiv_theScroll').onmouseup = scrollDiv_stopScroll;  
  192. if(document.all)document.body.onmouseup = scrollDiv_stopScroll; else  
  193. document.documentElement.onmouseup = scrollDiv_stopScroll;  
  194. document.getElementById('scrolldiv_scrollDown').onmousedown = scrolldiv_scrollButton;  
  195. document.getElementById('scrolldiv_scrollUp').onmousedown = scrolldiv_scrollButton;  
  196. document.getElementById('scrolldiv_scrollDown').onmouseup = scrolldiv_scrollButtonStop;  
  197. document.getElementById('scrolldiv_scrollUp').onmouseup = scrolldiv_scrollButtonStop;  
  198. document.getElementById('scrolldiv_scrollUp').onselectstart = cancelEvent;  
  199. document.getElementById('scrolldiv_scrollDown').onselectstart = cancelEvent;  
  200. document.getElementById('scrolldiv_scrollbar').onmousedown = scrolldiv_scrollMoveToInit;  
  201. }  
  202. function scrolldiv_setColor(rgbColor)  
  203. {  
  204. document.getElementById('scrolldiv_scrollbar').style.borderColor = rgbColor;  
  205. document.getElementById('scrolldiv_theScroll').style.backgroundColor = rgbColor;  
  206. document.getElementById('scrolldiv_scrollUp').style.borderColor = rgbColor;  
  207. document.getElementById('scrolldiv_scrollDown').style.borderColor = rgbColor;  
  208. document.getElementById('scrolldiv_scrollUp').style.color = rgbColor;  
  209. document.getElementById('scrolldiv_scrollDown').style.color = rgbColor;  
  210. document.getElementById('scrolldiv_parentContainer').style.borderColor = rgbColor;  
  211. }  
  212.  
  213. function scrolldiv_setWidth(newWidth)  
  214. {  
  215. document.getElementById('dhtmlgoodies_scrolldiv').style.width = newWidth + 'px';  
  216. document.getElementById('scrolldiv_parentContainer').style.width = newWidth-30 + 'px';   
  217. }  
  218.  
  219. function scrolldiv_setHeight(newHeight)  
  220. {  
  221. document.getElementById('dhtmlgoodies_scrolldiv').style.height = newHeight + 'px';  
  222. document.getElementById('scrolldiv_parentContainer').style.height = newHeight + 'px';  
  223. document.getElementById('scrolldiv_slider').style.height = newHeight + 'px';  
  224. document.getElementById('scrolldiv_scrollbar').style.height = newHeight-40 + 'px';   
  225. }  
  226. function setSliderBgColor(rgbColor)  
  227. {  
  228. document.getElementById('scrolldiv_scrollbar').style.backgroundColor = rgbColor;  
  229. document.getElementById('scrolldiv_scrollUp').style.backgroundColor = rgbColor;  
  230. document.getElementById('scrolldiv_scrollDown').style.backgroundColor = rgbColor;  
  231. }  
  232. function setContentBgColor(rgbColor)  
  233. {  
  234. document.getElementById('scrolldiv_parentContainer').style.backgroundColor = rgbColor;  
  235. }  
  236. function setScrollButtonSpeed(newScrollButtonSpeed)  
  237. {  
  238. scrollbuttonSpeed = newScrollButtonSpeed;  
  239. }  
  240. function setScrollTimer(newInterval)  
  241. {  
  242. scrollTimer = newInterval;  
  243. }  
  244.  
  245. </script> 
  246.  
  247. </head> 
  248. <body> 
  249. <div id="dhtmlgoodies_scrolldiv"> 
  250. <div id="scrolldiv_parentContainer"> 
  251. <div id="scrolldiv_content">这是一个DIV层，加入了一个滚动条功能，当超出范围的时候便会自动出现，你可以拖动滚动条看看效果哦。<br> 
  252. </div> 
  253. </div> 
  254. <div id="scrolldiv_slider"> 
  255. <div id="scrolldiv_scrollUp"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_up.gif"></div> 
  256. <div id="scrolldiv_scrollbar"> 
  257. <div id="scrolldiv_theScroll"><span></span></div> 
  258. </div> 
  259. <div id="scrolldiv_scrollDown"><img src="http://www.codefans.net/jscss/demoimg/200905/arrow_down.gif"></div> 
  260. </div> 
  261. </div> 
  262. <script type="text/javascript"> 
  263. scrolldiv_setColor('#317082');  
  264. setSliderBgColor('#E2EBED');  
  265. setContentBgColor('#FFFFFF');  
  266. setScrollButtonSpeed(1);  
  267. setScrollTimer(5);  
  268. scrolldiv_setWidth(450);  
  269. scrolldiv_setHeight(400);  
  270. scrolldiv_initScroll();  
  271. </script> 
  272. </body> 
  273. </html> 
  274.  


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 css 给div 添加滚动条样式hover 效果 滚动条样式设置 滚动条样式优化 CSS 滚动条样式 css 滚动条样式 滚动条样式修改 QT 滑动条和滚动条的样式 DIV+CSS 样式之 不出现横向滚动条，内容自动换行 【前端】webkit内核浏览器DIV滚动条样式修改和设置 div设置宽高及滚动条
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM