大家好，又见面了，我是你们的朋友全栈君。
我遇到的场景：
对于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
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/155418.html原文链接：https://javaforall.net
