【兼容Chrome和Firefox】浏览器滚动条美化

问题浮现

对于项目系统的美化处理，除了UI设计稿与组件自定义设计，对于浏览器滚动条的美化也是必要的，谁也不想自己的界面和布局都设计得很完美，结果出现了下图的滚动条吧

那接下来我们实现一下类似cnblob的滚动条

具体实现

首先，我们需要创建一个类名autoList的div元素（一般来说这个类应该挂载到顶层的bodyDom，也可以对一些聊天框进行美化），给类autoList的dom元素添加滚动条
Css里面，-webkit开头的伪元素::实现了Chrome浏览器滚动条的样式，Firefox scrollbar-width: thin实现了FireFox浏览器滚动条的样式

.autoList {overflow: auto;scrollbar-width: thin; //兼容Firefox
}
//兼容Chrome
.autoList::-webkit-scrollbar {width: 5px;
}
.autoList::-webkit-scrollbar-track {background-color:#fff;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;
}
.autoList::-webkit-scrollbar-thumb {background-color:#999;-webkit-border-radius: 2em;-moz-border-radius: 2em;border-radius:2em;
}

本文写的比较粗略，浏览器滚动条的美化有什么其他hack skill ，欢迎留言

【兼容Chrome和Firefox】浏览器滚动条美化相关推荐

CSS兼容Chrome和Firefox
在做页面兼容Chrome和Firefox浏览器时,有时候会由于css样式导致两者显示不一致,比如在Chrome上显示正常,而在Firefox上可能就会出现纵向滚动条,这时候就要针对不同类型浏览器应用不 ...
自定义浏览器滚动条样式（兼容chrome和firefox）
大家好,我是前端队长Daotin,想要获取更多前端精彩内容,关注我,解锁前端成长新姿势. 以下正文: 问题描述浏览器默认的滚动条样式太丑了,而且不同的浏览器下滚动条的样式也不一样,为了美观和统一,必 ...
python语言+selenium自动化，编写脚本调用Chrome、Firefox浏览器打开百度网站
python语言+selenium自动化,编写脚本调用Chrome.Firefox浏览器打开百度网站目标:初始化一个webdriver实例对象driver,通过webdriver.Chrome()和 ...
CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome.Firefox.IE5.5+三大浏览器的改写方法. Chrome: 原理:通过-webkit相关属性直接可以灵活控制滚动条 ...
IE浏览器即将“退役”，银行、学校的老网站们如何兼容Chrome、Firefox和360等浏览器？
微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Windows 10系统将不微软公司在2021年5月19日突然宣布: 自2022年6月15日起,大多数版本的Window ...
解决SWFUpload在Chrome、Firefox浏览器下session找不到的问题
SWFUpload是一个非常不错的异步上传组件,但是在Chrome.Firefox等浏览器下使用的时候会有问题.问题如下:为了防止跳过上传页面直接向"接受SWFUpload上传的一般处理程 ...
Chrome和Firefox浏览器长截图
假设有一个很长的网页,我想把整个页面都给截下来,那么我可以使用Firefox浏览器或者Chrome浏览器实现长截屏. Firefox浏览器截屏 Firefox浏览器自带的截屏,选择截取整个页面,就可以 ...
selenium中Chrome和Firefox浏览器驱动的使用和版本对应
一.Chrome驱动的具体使用问题使用WebDriver在Chrome浏览器上进行测试时, 需要从http://chromedriver.storage.googleapis.com/index.h ...
chrome和Firefox浏览器如何访问非安全端口站点
公司某系统采用端口6666,结果用chrome和Firefox都打不开,后来发现是端口问题,解决方式如下: 1.chrome 找到chrome快捷方式,右键查看属性,在[目标]输入框后面追加一个参数– ...

【兼容Chrome和Firefox】浏览器滚动条美化

问题浮现

具体实现

【兼容Chrome和Firefox】浏览器滚动条美化相关推荐

最新文章

热门文章