当前位置：Gxlcms > html代码 > HTML中的滚动条有哪些使用技巧

HTML中的滚动条有哪些使用技巧

时间：2021-07-01 10:21:17 帮助过：39人阅读

这次给大家带来HTML中的滚动条有哪些使用技巧，HTML中的滚动条的哪些使用技巧的注意事项有哪些，下面就是实战案例，一起来看一下。

我说一个现象大家一定常见 ,就是在网页中删除一些东西的时候滚动条往往还在删除东西之前的位置,而不是非常不人性化的跑到那一页的顶部,那么这是怎么实现的呢?其实办法很简单,只需要在.aspx的源码中的顶端部分加上 MaintainScrollPositionOnPostback ="true"即可。
以上这个现象就是在学习牛腩新闻发布系统的时候遇到的,下面就给大家来分享一些其他关于html滚动条的使用技巧
(1)隐藏滚动条 

  1. <bodystyle="
  2. overflow-x
  3. :hidden;overflow-y:hidden">

(2)如何在单元格或图层中出现滚动条 

  1. <divstyle="width:200px;height:200px;overflow-x:auto;overflow-y:auto;"></div>


(3)javascript改变框架中滚动条的样式，比如改变颜色、改为平面效果等 

  1. <STYLE> 
  2. BODY {SCROLLBAR-FACE-COLOR: #ffcc99; 
  3. SCROLLBAR-HIGHLIGHT-COLOR: #ff0000; 
  4. SCROLLBAR-SHADOW-COLOR: #ffffff; 
  5. SCROLLBAR-3DLIGHT-COLOR: #000000; 
  6. SCROLLBAR-ARROW-COLOR: #ff0000; 
  7. SCROLLBAR-TRACK-COLOR: #dee0ed; 
  8. SCROLLBAR-DARKSHADOW-COLOR: #ffff00;} 
  9. </STYLE>

说明：
scrollbar-3dlight-color:color;设置或检索滚动条亮边框颜色；
scrollbar-highlight-color:color;设置或检索滚动条3D界面的亮边颜色；
scrollbar-face-color:color;设置或检索滚动条3D表面的颜色；
scrollbar-arrow-color:color;设置或检索滚动条方向箭头的颜色；当滚动条出现但不可用时，此属性失效；
scrollbar-shadow-color:color;设置或检索滚动条3D界面的暗边颜色；
scrollbar-darkshadow-color:color;设置或检索滚动条暗边框颜色；
scrollbar-base-color:color;设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。
scrollbar-track-color:color;设置或检索滚动条的拖动区域颜色
备注：
color为你要设置的颜色代码，可以是16进制的，比如#FF0000，可以是以RGB表示的，比如rgb(255,0,255)；设置滚动条样式的时候不必要把所有的属性都用上才会生效。
(4)javascript中的页面元素定位
clientX、clientY是鼠标当前相对于网页的位置，当鼠标位于页面左上角时clientX=0, clientY=0；
offsetX、offsetY是鼠标当前相对于网页中的某一区域的位置，当鼠标位于页面中这一区域的左上角时offsetX=0, offsetY=0；
screenX、screenY是鼠标相对于用户整个屏幕的位置；
x、y是鼠标当前相对于当前浏览器的位置
scrollLeft：设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离（因为有滚动条的产生，所以目前页面可见内容是不定的）。
scrollTop：设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离。
left：对象相对于页面的X坐标。
top：对象相对于页面的Y坐标
(5)屏蔽选择,右键等
<body oncontextmenu=self.event.returnValue=falseonselectstart="return false">
下面的这个小例子是 实现滚动条根据窗体的大小自动设置 

  1. <SPAN style="FONT-SIZE: 18px"><html> 
  2. <head> 
  3. <style type="text/css"> 
  4. &nbsp; .TopDIV 
  5. &nbsp; {&nbsp; 
  6. &nbsp;&nbsp;&nbsp;&nbsp; position:absolute; 
  7. &nbsp;&nbsp;&nbsp;&nbsp; left:130px; 
  8. &nbsp;&nbsp;&nbsp;&nbsp; top:10px; 
  9. &nbsp;&nbsp;&nbsp;&nbsp; width:105; 
  10. &nbsp;&nbsp;&nbsp;&nbsp; height:30; 
  11. &nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden; 
  12. &nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto; 
  13. &nbsp;&nbsp;&nbsp;&nbsp; float: right; 
  14. &nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid; 
  15. &nbsp;&nbsp;&nbsp;&nbsp; border-width:; 
  16. &nbsp;&nbsp;&nbsp;&nbsp; border-color:red 
  17. &nbsp; } 
  18. &nbsp; .LeftDIV 
  19. &nbsp; {&nbsp; 
  20. &nbsp;&nbsp;&nbsp;&nbsp; position:absolute; 
  21. &nbsp;&nbsp;&nbsp;&nbsp; left:10px; 
  22. &nbsp;&nbsp;&nbsp;&nbsp; top:40px; 
  23. &nbsp;&nbsp;&nbsp;&nbsp; width:120; 
  24. &nbsp;&nbsp;&nbsp;&nbsp; height:60; 
  25. &nbsp;&nbsp;&nbsp;&nbsp; overflow-x:hidden; 
  26. &nbsp;&nbsp;&nbsp;&nbsp; overflow-y:hidden; 
  27. &nbsp;&nbsp;&nbsp;&nbsp; float: right; 
  28. &nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid; 
  29. &nbsp;&nbsp;&nbsp;&nbsp; border-width:; 
  30. &nbsp;&nbsp;&nbsp;&nbsp; border-color:yellow 
  31. &nbsp; } 
  32. &nbsp; .MainDIV 
  33. &nbsp; {&nbsp; 
  34. &nbsp;&nbsp;&nbsp;&nbsp; position:absolute; 
  35. &nbsp;&nbsp;&nbsp;&nbsp; left:130px; 
  36. &nbsp;&nbsp;&nbsp;&nbsp; top:40px; 
  37. &nbsp;&nbsp;&nbsp;&nbsp; width:120;; 
  38. &nbsp;&nbsp;&nbsp;&nbsp; height:80; 
  39. &nbsp;&nbsp;&nbsp;&nbsp; overflow-x:auto; 
  40. &nbsp;&nbsp;&nbsp;&nbsp; overflow-y:auto; 
  41. &nbsp;&nbsp;&nbsp;&nbsp; float: right; 
  42. &nbsp;&nbsp;&nbsp;&nbsp; border-style.:solid; 
  43. &nbsp;&nbsp;&nbsp;&nbsp; border-width:; 
  44. &nbsp;&nbsp;&nbsp;&nbsp; border-color:blue 
  45. &nbsp; } 
  46. </style> 
  47. <script type="text/javascript" language="javascript"> 
  48. function setStyle() 
  49. { 
  50. //145的由来LeftDiv的left+width+15（15是滚动条的宽度） 
  51. document.getElementById("a").style.width=document.body.clientWidth - 145; 
  52. //130的由来LeftDiv的left+width 
  53. document.getElementById("c").style.width=document.body.clientWidth - 130; 
  54. //55的由来TopDIV的top+height+15（15是滚动条的宽度） 
  55. document.getElementById("b").style.height=document.body.clientHeight - 55; 
  56. //40的由来TopDIV的top+height 
  57. document.getElementById("c").style.height=document.body.clientHeight - 40; 
  58. } 
  59. </script> 
  60. &nbsp; 
  61. </head> 
  62. <body onresize="setStyle();" onLoad="setStyle();"> 
  63. &nbsp; 
  64. <div id='a' class="TopDIV"> 
  65. 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  66. </div> 
  67. &nbsp; 
  68. <div id='b' class="LeftDIV"> 
  69. 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  70. 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  71. 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  72. 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  73. 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  74. 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  75. 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  76. 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  77. 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  78. 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  79. 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  80. 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  81. </div> 
  82. <div id='c' onscroll="document.getElementById('b').scrollTop = this.scrollTop;document.getElementById('a').scrollLeft = this.scrollLeft;" 
  83. &nbsp;class="MainDIV"> 
  84. 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  85. 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  86. 3234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  87. 4234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  88. 5234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  89. 6234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  90. 7234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  91. 8234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  92. 9234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  93. 0234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  94. 1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  95. 2234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ 
  96. </div> 
  97. </body> 
  98. </html>

滚动条的使用是很常见的,它的相关知识也是相当的多,希望自己能在不断的学习中,不断的总结,使自己的学习能力和学习效率能有一定的提高.

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

相关阅读：

input的文本框怎么做到和img验证码

html如何实现鼠标悬停提示A标签内容

怎样使用trigger方式实现不用点击file类型的input弹出文件选择对话框

以上就是HTML中的滚动条有哪些使用技巧的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！