div左右滚动条(转)

 

上下/左右滚动条都有
<div style="overflow:scroll;height:77;width:300">123</div>   

只产生左右滚动条

<div style="overflow-X:scroll;height:77;width:300">123</div>   

只产生上下滚动条

<div style="overflow-Y:scroll;height:77;width:300">123</div>

下拉滚动条(带颜色的)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">   


<html xmlns="http://www.w3.org/1999/xhtml">   


看有这两行没,W3C XHTML兼容代码,去掉那行代码就可以了.   都删除掉就可以了

<head>   
<STYLE>   
<!--   
BODY    
SCROLLBAR-FACE-COLOR:   #21a8c3;   
    SCROLLBAR-HIGHLIGHT-COLOR:   #ffffff;   
    SCROLLBAR-SHADOW-COLOR:   #ffffff;   
    SCROLLBAR-3DLIGHT-COLOR:   #ffffff;   
    SCROLLBAR-ARROW-COLOR:   #ffffff;   
    SCROLLBAR-TRACK-COLOR:   #eeeeee;   
    SCROLLBAR-DARKSHADOW-COLOR:   #ffffff;   
    SCROLLBAR-BASE-COLOR:   #ffffff;   
  
-->   
</STYLE>   
</head>   
<body>
<style type="text/css">
div {
    width:100px;
    height:100px;
    overflow-y:auto;
    overflow-x:hidden;
}
</style>

<div>11111111111111111111111
22222222222222222222222
   3333333333333333333333
11111111111111111111111
22222222222222222222222
   3333333333333333333333
</div>

</body>


<textarea   cols=30   name=RedF9   rows=3   style="BORDER-BOTTOM:   #006600   1px  

dotted;   BORDER-LEFT:   #006600   1px   dotted;   BORDER-RIGHT:   #006600   1px  

dotted;   BORDER-TOP:   #006600   1px   dotted"   wrap=VIRTUAL></textarea>

没有水平滚动条: 

<textarea style="overflow-x:hidden"></textarea> 

没有垂直滚动条: 

<textarea   style="overflow-y:hidden"></textarea> 

没有滚动条: 

<textarea   style="overflow-x:hidden;overflow-y:hidden"></textarea> 

或<textarea   style="overflow:hidden"></textarea>    


overflow :用法 设置滚动条属性
语法:

overflow : visible | auto | hidden | scroll 

参数:

visible :  不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto :  此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden :  不显示超过对象尺寸的内容
scroll :  总是显示滚动条

说明:

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。
设置textarea对象为hidden值将隐藏其滚动条。
对于table来说,假如table-layout属性设置为fixed,则td对象支持带有默认值为hidden的overflow属性。如果设为 hidden,scroll或者auto,那么超出td尺寸的内容将被剪切。如果设为visible,将导致额外的文本溢出到右边或左边(视 direction属性设置而定)的单元格。
自IE5开始,此属性在MAC平台上可用。
对应的脚本特性为overflow。请参阅我编写的其他书目。

示例:

body { overflow: hidden; }
div { overflow: scroll; height: 100px; width: 100px; }
在 CSS 中,美化一个 `div` 的滚动条,包括其左右箭头,可以通过 `::-webkit-scrollbar` 伪元素来实现。然而,需要注意的是,`::-webkit-scrollbar` 仅在基于 WebKit 的浏览器(如 Chrome、Edge 和 Safari)中有效。Firefox 和其他浏览器使用不同的机制。 以下是美化一个 `div` 滚动条及其左右箭头的完整示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>美化滚动条</title> <style> /* 容器样式 */ .scroll-container { width: 300px; height: 200px; overflow: auto; white-space: nowrap; border: 1px solid #ccc; padding: 10px; font-family: Arial, sans-serif; } /* WebKit 浏览器的滚动条整体样式 */ .scroll-container::-webkit-scrollbar { height: 12px; /* 水平滚动条的高度 */ } /* 滚动条轨道 */ .scroll-container::-webkit-scrollbar-track { background-color: #f1f1f1; border-radius: 10px; } /* 滚动条滑块 */ .scroll-container::-webkit-scrollbar-thumb { background-color: #888; border-radius: 10px; } /* 滚动条左右箭头 */ .scroll-container::-webkit-scrollbar-button { background-color: #555; display: block; width: 12px; height: 12px; } /* Firefox 浏览器的滚动条样式 */ @scrollbar-width: auto; @scrollbar-color: #888 #f1f1f1; /* 自定义滚动条样式(兼容性更好的方法) */ .scroll-container { scrollbar-width: auto; scrollbar-color: #888 #f1f1f1; } </style> </head> <body> <div class="scroll-container"> <p>这是一个很长的文本内容,用于测试美化后的滚动条样式。这是一个很长的文本内容,用于测试美化后的滚动条样式。</p> <p>继续添加一些内容,以便滚动条可以显示出来。</p> <p>继续添加一些内容,以便滚动条可以显示出来。</p> <p>继续添加一些内容,以便滚动条可以显示出来。</p> <p>继续添加一些内容,以便滚动条可以显示出来。</p> </div> </body> </html> ``` ### 代码解释: 1. **`.scroll-container`**:定义了一个固定大小的 `div`,并设置了 `overflow: auto` 来启用滚动条。 2. **`::-webkit-scrollbar`**:这是一个伪元素,用于定义滚动条的样式。这里设置了滚动条的高度为 `12px`。 3. **`::-webkit-scrollbar-track`**:定义滚动条轨道的样式,设置了背景颜色和圆角。 4. **`::-webkit-scrollbar-thumb`**:定义滚动条滑块的样式,设置了背景颜色和圆角。 5. **`::-webkit-scrollbar-button`**:定义滚动条左右箭头的样式,设置了背景颜色和大小。 6. **`@scrollbar-width` 和 `@scrollbar-color`**:这是针对 Firefox 浏览器的滚动条样式设置,但功能较为有限。 7. **兼容性处理**:为了确保在不同浏览器中滚动条样式尽可能一致,代码中同时使用了 WebKit 样式和 Firefox 的 `scrollbar-width` 和 `scrollbar-color`。 ### 注意事项: 1. **浏览器兼容性**: - `::-webkit-scrollbar` 仅适用于基于 WebKit 的浏览器(如 Chrome 和 Safari)。 - Firefox 使用 `scrollbar-width` 和 `scrollbar-color` 来控制滚动条样式,但它们的功能较为有限。 - 对于其他浏览器(如 IE),滚动条样式无法通过 CSS 直接修改,可能需要使用 JavaScript 或自定义滚动条插件。 2. **左右箭头的样式**: - 在 WebKit 浏览器中,可以通过 `::-webkit-scrollbar-button` 伪元素来美化滚动条左右箭头。 - 然而,Firefox 和其他浏览器不支持直接美化箭头,因此可能需要通过自定义滚动条插件来实现。 3. **性能优化**: - 如果需要更复杂的滚动条样式(如动画效果或自定义图标),建议使用 JavaScript 滚动条插件(如 [Perfect Scrollbar](https://github.com/mdbootstrap/perfect-scrollbar) 或 [OverlayScrollbars](https://github.com/KingSora/OverlayScrollbars))。 --- ### 相关问题: 1. 如何在 Firefox 浏览器中完全自定义滚动条样式? 2. 如何使用 JavaScript 插件实现跨浏览器的滚动条美化? 3. 如何为垂直滚动条设置不同的样式? 4. 如何在滚动条上添加动画效果?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值