HTML滚动条

最新推荐文章于 2023-01-09 17:01:00 发布
最新推荐文章于 2023-01-09 17:01:00 发布
阅读量536 收藏
点赞数
分类专栏： HTML 文章标签： web前端 浏览器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012601647/article/details/54565569
版权 
滚动条第一种方式：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
 <div style="overflow: auto; height: 100px; width:200px;">
     <table id="table" border="1" align="center" width="300px" height="200px">
   <tbody>
    <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
    <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
    <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
    <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
   </tbody>
   
  </table>
   </body>
   </div>
</body>
</html>	
滚动条第二种方式：




<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
 <div style="width:300px">
     <table id="table" border="1" align="center" width="300px">
	 <thead>
	 <tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr>
	 </thead>
   <tbody>
   </tbody>
  </table>
</div>
  <div style="overflow: auto; height: 100px;width:320px">
     <table id="table" border="1" align="center" width="300px" height="200px">
   <tbody>
    <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr>
    <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
    <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
    <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
   </tbody>
   
  </table>
   </body>
   </div>
</body>

滚动条第三种方式(第二种方法机场会出现列不对齐的情况)：




<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>CSS linear-gradient()_CSS3</title>
<style>
</style>
</head>
<body>
<div style="width:300px">
 <div style="width:300px"> <table id="table" border="1" align="center" width="300px"> <thead> <tr><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th><th>标题</th></tr> </thead> <tbody> </tbody> </table></div> <div style="overflow:
 auto; height: 100px;width:320px"> <table id="table" border="1" align="center" width="300px" height="200px"> <tbody> <tr><td>00</td><td>01</td><td>02</td><td>03</td><td>04</td><td>05</td></tr> <tr><td>10</td><td>11</td><td>12</td><td>13</td><td>15</td><td>15</td></tr>
 <tr><td>20</td><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr> <tr><td>30</td><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr> </tbody> </table> </body> </div>



</div>




</body>



</html>



滚动条第四种方式：




<!DOCTYPE html>

<html lang="zh-cn">

<head>

<meta charset="utf-8" />

<title>CSS linear-gradient()_CSS3</title>

<style>
.table thead tr {
	display:block;
}
.table tbody {
	display: block;
	height: 150px;
	overflow: auto;
}

</style>

</head>

<body>
<table class="table">
                          <thead>
                              <tr>
                                  <th>姓名</th>
                                  <th>工号</th>
                                  <th>年龄</th>
                                  <th>部门</th>
                                  <th>工资</th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
                              <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
                              <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
							  <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
							  <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
							  <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
							  <tr>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                                  <td>XX</td>
                              </tr>
                          </tbody>
                      </table>

</body>
</html>		

总结
1． overflow内容溢出时的设置（设定被设定对象是否显示滚动条）
    overflow-x水平方向内容溢出时的设置
    overflow-y垂直方向内容溢出时的设置
    以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。


2． scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
    scrollbar-arrow-color上下按钮上三角箭头的颜色
    scrollbar-base-color滚动条的基本颜色
    scrollbar-dark-shadow-color立体滚动条强阴影的颜色
    scrollbar-face-color立体滚动条凸出部分的颜色
    scrollbar-highlight-color滚动条空白部分的颜色
    scrollbar-shadow-color立体滚动条阴影的颜色




















                

        

        

    




    

      

        

            

              
                
                  菜鸟小灰灰
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      

            

                专栏目录
          










                



	

		

			

				
					
HTML网页滚动条使用整理_网页滚动条使用详解

				
			

			

				

					天马3798
				

				

					06-01
					
					609
					
				

			

		

		

			
				
HTML Document 滚动条，自动出现；当网页内容超出浏览器可视宽度或者高度，滚动条自动出现；不同浏览器滚动条样式效果不同。1.js绑定2.jquery 绑定3.js滚动条监听：滚动条事件，操作滚动条滚动。

			
		

	



                

              
                



	

		

			

				
					
html滚动条

				
			

			

				

					12-06
				

			

		

		

			
				
很简单的html滚动条，适合刚开始学习html的同学，非常实用。

			
		

	



                


  
              

                


	

		

			

				
					
手机html设纵向滚动条,html滚动条

				
			

			

				

					weixin_34072734的博客
				

				

					06-03
					
					3162
					
				

			

		

		

			
				
手机评站网今天精心准备的是《html滚动条》，下面是详解！HTML滚动条的属性scrollbar，这个有哪些属性...scrollbar，这个有哪些属性1．overflow内容溢出时的设置(设定被设定对象是否显示滚动条)overflow-x水平方向内容溢出时的设置overflow-y垂直方向内容溢出时的设置以上三个属性设置的值为visible(默认值)、scroll、hidden、auto。 2．...

			
		

	





	

		

			

				
					
html滚动条美化

				
			

			

				

					xcLeigh
				

				

					04-14
					
					2405
					
				

			

		

		

			
				
样式代码
<style type="text/css">
.rc{
   /*要设置滚动条的容器样式*/
 }
 .rc::-webkit-scrollbar {/*滚动条整体样式*/
   width: 2px;     /*高宽分别对应横竖滚动条的尺寸*/
   height: 1px;
 }
 .rc::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0

			
		

	



		

			
		



	

		

			

				
					
html滚动条样式

				
			

			

				

					wilL-my的博客
				

				

					01-09
					
					2778
					
				

			

		

		

			
				
【代码】html滚动条样式。

			
		

	





	

		

			

				
					
h5 html滚动条,配置H5的滚动条样式

				
			

			

				

					weixin_31601663的博客
				

				

					06-08
					
					3124
					
				

			

		

		

			
				
这次给大家带来配置H5的滚动条样式的，配置H5的滚动条样式的注意事项有哪些，下面就是实战案例，一起来看一下。本文介绍了配置H5的滚动条样式的示例代码，分享给大家，具体如下：/* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-track {background-color: #b46868;}/* 滑块颜色 */::-webkit-scrollbar-thumb {backgro...

			
		

	





	

		

			

				
					
html滚动条怎么置顶,js控制滚动条到最底端(置底)和最顶端(置顶)

				
			

			

				

					weixin_34600909的博客
				

				

					06-01
					
					2320
					
				

			

		

		

			
				
滚动条样式：body {SCROLLBAR-FACE-COLOR: #f892cc;SCROLLBAR-HIGHLIGHT-COLOR: #f256c6;SCROLLBAR-SHADOW-COLOR: #fd76c2;SCROLLBAR-3DLIGHT-COLOR: #fd76c2;SCROLLBAR-ARROW-COLOR: #fd76c2;SCROLLBAR-TRACK-COLOR: #fd7...

			
		

	





	

		

			

				
					
HTML 滚动条实现

				
			

			

				

					weixin_33744854的博客
				

				

					04-02
					
					2688
					
				

			

		

		

			
				
##在对应的div中，添加overflow,固定高度为400px<div class="panel-body" style="height: 400px; overflow:scroll">
     <div style="border: 1px  #000000; width: 90%; margin: 0 auto;">
                &lt...

			
		

	





	

		

			

				
					
html 滚动条自动最底,让DIV的滚动条自动滚动到最底部 - 4种方法

				
			

			

				

					weixin_33806343的博客
				

				

					05-31
					
					7795
					
				

			

		

		

			
				
要制作一个在线聊天的程序，在做最后的修饰时，需要对获得的信息即时滚动以保证用户总能看到最新消息。聊天程序是基于AJAX设计的，没有用框架，消息容器是一个DIV，所以问题就在于如何控制DIV的滚动条。网上有资料介绍说通过设置scrollTop属性来控制滚动条位置，具体可参见：http://hi.baidu.com/chen1345789/blog/item/de727bfb45587b176d22e...

			
		

	





	

		

			

				
					
html 滚动条处于页面底部,滚动条一直置于页面底部,开发聊天程序须知。

				
			

			

				

					weixin_35747785的博客
				

				

					06-04
					
					1478
					
				

			

		

		

			
				
有些时候(如开发聊天程序)，我们需要将将滚动条(scrollbar)保持在最底部，比如聊天窗口，最新发出和收到的信息要显示在最下方，如果要看到最下方的内容，就必须保证滚动条保持在最底部。htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d...

			
		

	





	

		

			

				
					
html滚动条 textarea属性设置

				
			

			

				

					09-28
				

			

		

		

			
				
HTML滚动条和`textarea`属性设置是网页设计中常见的元素，它们允许用户在内容超过容器大小时进行浏览和导航。本文将深入探讨这两个概念，并提供一些实用的代码示例。  首先，`overflow`属性用于控制当内容超出其指定...

			
		

	





	

		

			

				
					
在html中滚动条显示的属性,html滚动条textarea属性设置本 textarea怎么显示滚动条...

				
			

			

				

					weixin_31303743的博客
				

				

					06-04
					
					1806
					
				

			

		

		

			
				
html中的textarea标签设置垂直滚动条。我在textarea中自动赋值，，字符超过高度，，滚动条不懂。textarea滚动条样式textarea如何改变内部的滚动条样式，并且兼容ie要设置textarea文本域的滚动条是否开启，使用style.overflow-x属性来控制。如：如果要隐藏该文本域的横向滚动条，在style属性中增加overflow-x属性控制，如下： 相应的，若要隐藏纵向...

			
		

	





	

		

			

				
					
form表单提交不刷新页面

					
热门推荐

				
			

			

				

					菜鸟小灰灰的博客
				

				

					03-30
					
					1万+
					
				

			

		

		

			
				
form表单提交时，往往会刷新页面，数据提交到后台会跳转到其他页面
如果不需要刷新页面时，可以通过ifame实现无刷新。
在form表单下定义一个ifame
,
将form的target属性指向frameFile，这样就实现了不刷新页面的form提交。

			
		

	





	

		

			

				
					
div 制作button

				
			

			

				

					菜鸟小灰灰的博客
				

				

					01-17
					
					6609
					
				

			

		

		

			
				
jsp主页面
<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>


<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.g

			
		

	





	

		

			

				
					
火狐谷歌浏览器上传文件问题

				
			

			

				

					菜鸟小灰灰的博客
				

				

					10-24
					
					2617
					
				

			

		

		

			
				
我们使用的IE浏览器可以获取本地完整路径，直接用
     传到后台一个明路径就可以。但是谷歌，火狐等浏览器保护客户隐私，对我们本地路径进行了屏蔽。导致无法获取完整路径，只能通过页面将文件流传递到后台，在进行解析操作。我们可以使用 ajaxFileUpload.js文件：
 $.ajaxFileUpload({
    	        url: basePath + '/dataInput/

			
		

	





	

		

			

				
					
弹出Message

				
			

			

				

					菜鸟小灰灰的博客
				

				

					11-30
					
					1516
					
				

			

		

		

			
				
开发过程中，经常需要弹出各种信息提示框，很多框架都自定义了提示框，有的框架或许没有，我们也可以使用alert ，confirm等IE自带的信息提示框，缺点就是太死板，无法修改其样式，所以很多时候是我们自定义提示框。
var cancleFlag  = 0;
function msgbox(content, cancel, icon) {
	if(null != cancel){
		cancle

			
		

	





	

		

			

				
					
div折行 table折行问题

				
			

			

				

					菜鸟小灰灰的博客
				

				

					01-15
					
					959
					
				

			

		

		

			
				
css控制自动换行,防止表格或div等被撑开[折行] 
style=" table-layout: fixed; word-break: break-all;  word-wrap: break-word;"


fixed ： 固定布局的算法。在这算法中，水平布局是仅仅基于表格的宽度，表格边框的宽度，单元格间距，列的宽度，而和表格内容无关。 


　为了让表格布局固定住，我们需要t

			
		

	





	

		

			

				
					
html滚动条不占宽度

					
最新发布

				
			

			

				

					09-01
				

			

		

		

			
				
HTML滚动条不占宽度是因为滚动条是浏览器的默认样式，它是以浮动在内容区域上方的覆盖层的形式存在，所以它并不占据实际的宽度空间。  当我们使用overflow属性来设置元素内容的溢出处理时，浏览器会自动生成滚动条。...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值