css滚动条样式美化

在想要滚动得元素上面添加 overflow-y: scroll;
然后修改样式

.chat::-webkit-scrollbar {width: 0 !important;
} //设置滚动条显示隐藏
/* 设置滚动条的样式 */
.chat::-webkit-scrollbar {width: 5px;border-radius: 8px;
}
/* 滚动槽 */
.chat::-webkit-scrollbar-track {/* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); */background-color: #555;
}
/* 滚动条滑块 */
.chat::-webkit-scrollbar-thumb {border-radius: 8px;background: #333;/* -webkit-box-shadow: inset006pxrgba(0, 0, 0, 0.5); */
}
//滚动条高度似乎没有找到控制高度得方法

css滚动条样式美化相关推荐

CSS 滚动条样式美化
滚动条主要属性 ::-webkit-scrollbar:滚动条整体部分 ::-webkit-scrollbar-thumb:滚动条里面的滑块 ::-webkit-scrollbar-track: 滚动 ...
html中美化右侧滑动条,美化css滚动条样式，就这么简单
很多朋友,会觉得默认的css滚动条样式是很丑的吧,稍微改下-webkit-scrollbar(滚动条整体样式).-webkit-scrollbar-thumb(滚动条里面小方块样式).-webkit- ...
css改变滚动条样式兼容火狐_jq完美解决css滚动条样式IE火狐不兼容问题
上次关于css滚动条样式的文章<美化css滚动条样式,就这么简单>,不够完美不兼容IE.火狐浏览器,但今天这篇文章可以完美解决这个问题,用到了jquery插件jquery.mCustomS ...
CSS前端样式美化总结
css按钮样式美化 .login-button { /* 按钮美化 */ width: 270px; /* 宽度 */ height: 40px; /* 高度 */ borde ...
css自定义横向滚动条样式,css滚动条样式自定义
很简单的几行代码 Title * { margin: 0; padding: 0; } .out { width: 600px; height: 600px; margin: 100px auto; ...
CSS滚动条样式设置
CSS滚动条样式设置 1.概述 2.滚动条css 3.总结 1.概述最近项目中需要,将一个页面嵌入在一个webbrower中,这个webrower是定高的,在页面内容超过webbrower高度时,需 ...
CSS 滚动条样式【兼容chrome、Firefox、IE】
css滚动条样式,windows系统下,滚动条比较丑,以下分别是chrome.Firefox.IE5.5+三大浏览器的改写方法. Chrome: 原理:通过-webkit相关属性直接可以灵活控制滚动条 ...
css滚动条样式重写（兼容ie和谷歌）
博主在工作中遇到修改滚动条样式的情况,效果如下: 1.重写滚动条样式,兼容IE,谷歌. 2.鼠标移入元素显示滚动条,鼠标移出隐藏滚动条. 注意: 1.互不干扰:首先说明的是谷歌的css滚动条样式的写法 ...
vue less CSS滚动条样式修改美化变细
滚动条样式 ::-webkit-scrollbar {/*滚动条整体样式*/width: 10px; /*高宽分别对应横竖滚动条的尺寸*/height: 1px; }::-webkit-scrollb ...

css滚动条样式美化

css滚动条样式美化相关推荐

最新文章

热门文章