DIV滚动条样式

来源：互联网发布：sql 身份证号与岁数编辑：程序博客网时间：2024/06/06 16:25

Jquery滚动条
http://www.17sucai.com/pins/426.html
http://www.17sucai.com/pins/23.html
http://www.17sucai.com/pins/279.html

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

例1：

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

<divstyle="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">
文字内容
</div>

（2）

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

（3）

<divstyle="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">
文字内容
</div>

（4）

<divstyle="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">
文字内容
</div>

（5）

<divstyle="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">
文字内容
</div>

（6）

<divstyle="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">
文字内容
</div>

（7）

<divstyle="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">
文字内容
</div>

（8）

<divstyle="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">
文字内容
</div>

（9）

<divstyle="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">
文字内容
</div>

（10）

<divstyle="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">
文字内容
</div>

（11）

<divstyle="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">
文字内容
</div>

（12）

<divstyle="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">
文字内容
</div>

（13）

<divstyle="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">
文字内容
</div>

（14）

<divstyle="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">
文字内容
</div>

（15）

<divstyle="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">
文字内容
</div>

（16）

<divstyle="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">
文字内容
</div>

（17）

<divstyle="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">
文字内容
</div>

（18）

<divstyle="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">
文字内容
</div>

（19）

<divstyle="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">
文字内容
</div>

如何让div只有垂直滚动条overflow-y:scroll;
OVERFLOW-x: none;