css 自定义滚动条样式

css 自定义滚动条样式我遇到的场景:对于iframe窗口,自带滚动条是整个窗口的大小。有时需要顶部或底部固定,则滚动条不应该触碰到顶部或底部。那么首先打开iframe时应该去掉滚动条scrolling="n

大家好,又见面了,我是你们的朋友全栈君。

我遇到的场景:

对于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>

效果如下:

<span role="heading" aria-level="2">css 自定义滚动条样式

 

 

 

转 : https://www.cnblogs.com/zuochengsi-9/p/7658339.html

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/155418.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • SecureCRTPortable链接ip(虚拟机)(图文详解)

    SecureCRTPortable链接ip(虚拟机)(图文详解)【确定虚拟机ip地址】可参考:https://blog.csdn.net/weixin_44727274/article/details/107265723SecureCRTPortable是个绿色文件,下载安装包,解压即可使用。虚拟机开启下,双击打开,建立快速连接:设置完成后,点击【链接】输入密码后,…

  • spring SpEL

    spring SpEL

  • 为总结经验 为后续工作(关于靠谱的心得体会)

    缘起&amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;nbsp;&amp;amp;amp;amp;amp;amp;nbsp;上一周,电脑突然蓝屏崩溃了,幸亏在保质期内,厂家给免费维修,据说硬盘坏了,因此导致了所有数据丢失,虽然没有太多重要的,内心仍不是个滋味。于是打算将所有的不是特别重要东西能放到云端的都放到云端去。内容(会持续更新)&amp

  • 如何让虚拟机的Ubuntu上网?

    如何让虚拟机的Ubuntu上网?学习于韦工百问科技-悦己方能悦人,感谢!我的环境:unbuntu16.04特别注意:如果你使用的虚拟机和Ubuntu不一样,现象可能不一样,请具体情况具体分析。一、为什么要让虚拟机中的Ubuntu上网?想在线安装软件,下载git源码包,或者要用浏览器浏览网页二、虚拟机中的Ubuntu有几种上网方式?通常有2种,NAT、桥接三、NAT上网怎么用…

  • 《前端运维》二、Nginx–1基本概念及安装

    一、Nginx基本概念简单来说,Nginx就是一个代理服务器,什么是代理服务器呢?也就是当我们访问服务器的时候,请求不会直接请求到服务器,中间会有个代理,代理会预先于服务器处理这些请求,最后由代理决

  • 屏蔽自动更新描述文件(屏蔽描述文件)

    是不是应该说终于,是的。关于iOS屏蔽系统升级的描述文件在几个月前失效的事情大家都清楚了,苹果先是让描述文件失效,然后重新分享的屏蔽升级描述文件也相继的失效,之后也没有新的文件出来。之后是各种的sao操作出来,曲线饶了远路才能把iPhone晚上充电连着WIFI会自动升级的问题解决。有些方法还不能够完全解决问题,进行了屏蔽之后可能会让AppStore不能够进行正常的软件更新。之前修改WIFI,屏…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号