css 自定义滚动条样式
2022/1/24 23:34:41
本文主要是介绍css 自定义滚动条样式,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
我遇到的场景:
对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。
那么首先打开iframe时应该去掉滚动条 scrolling="no",然后在需要滚动的区域自定义滚动条。
<iframe frameborder="0" scrolling="no" src="index.html" >
自定义滚动条代码如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>滚动</title> <style> .scroll_contain{ overflow-y: scroll; border: none; } .scroll_config::-webkit-scrollbar {/*滚动条整体样式*/ width:5px; height:5px } .scroll_config::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ background-color:#ccc; border:solid 1px #ccc; border-radius:2px; } .scroll_config::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 2px; background: #EDEDED; } .scroll_config::-webkit-scrollbar-arrow { color:#F00; background:#0F0; } </style> </head> <body> <div class="scroll_contain scroll_config" style="height: 200px;width: 200px"> <div> 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 东方不败东方不败东方不败东方不败东方不败东方不败 </div> </div> </body> </html>
效果如下:
转 : https://www.cnblogs.com/zuochengsi-9/p/7658339.html
这篇关于css 自定义滚动条样式的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-10深入浅出TailwindCSS开发:快速上手与实战技巧
- 2024-09-10尾风CSS开发:快速上手与实战指南
- 2024-09-10从零开始:深入TailwindCSS项目实战,快速上手构建高效网站
- 2024-09-10尾风CSS项目实战:初级用户快速上手指南
- 2024-09-07TailwindCSS从入门到实践:全面指南
- 2024-09-05Tailwind.css入门:快速上手指南
- 2024-08-29CSS9资料:入门级CSS教程与实用技巧指南
- 2024-08-29CSS定位资料大全:初学者入门指南
- 2024-08-29CSS 浮动资料:入门级教程与实践
- 2024-08-29CSS样式入门:快速获取与掌握CSS样式资料的指南