HTML滚动条样式修改

（newsPart为滚动区域的类名）

.newsPart::-webkit-scrollbar {/*滚动条整体样式*/width : 6px;  /*高宽分别对应横竖滚动条的尺寸*/height: 1px;
}
.newsPart::-webkit-scrollbar-thumb {/*滚动条里面小方块*/border-radius   : 10px;background-color: rgba(3 ,91 ,203 ,0.5);background-image: -webkit-linear-gradient(45deg,rgba(255, 255, 255, 0.2) 25%,transparent 25%,transparent 50%,rgba(255, 255, 255, 0.2) 50%,rgba(255, 255, 255, 0.2) 75%,transparent 75%,transparent);
}
.newsPart::-webkit-scrollbar-track {/*滚动条里面轨道*/box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);background   : #ededed;border-radius: 10px;
}

HTML滚动条样式修改相关推荐

el-table滚动条样式修改
我们知道,el-table滚动条样式默认取的好像是我们全局滚动条的样式,当我们修改了全局滚动条的样式后,table表格的滚动条样式也随之而变. 比如,当我们修改了全局滚动条的样式,使其变得窄一点 // ...
element-ui 滚动条样式修改
element ui的滚动条样式很难看这是修改全局的滚动条样式可以添加一下代码 /**修改全局的滚动条*/ /**滚动条的宽度*/ ::-webkit-scrollbar {width: 8p ...
chrome滚动条样式修改
对于chrome浏览器,它提供了修改滚动条样式的接口,开发者只需要加上几句css脚本,就可轻松实现滚动条样式的修改. 先说一下滚动条的参数: ::-webkit-scrollbar 滚动条整体部分,可 ...
CSS 滚动条样式修改（详细）
1.滚动条整体部分使用 ::-webkit-scrollbar 示例: .container::-webkit-scrollbar {width: 20px;//修改滚动条宽度 } 2.滚动条中的滑 ...
css 滚动条样式修改以及动态显示
限定高度并overflow:auto时,溢出滚动时,滚动条出现,对滚动条的样式修改,并只有当鼠标经过时才显示,代码如下 .plan::-webkit-scrollbar {transition: al ...
html5滚动条样式修改,css修改滚动条样式
在css中怎样改变滚动条的样式 /*IE滚动条颜色设置*/body {scrollbar-arrow-color:#f2f2f3;/*上下箭头*/scrollbar-track-color:#1589 ...
滚动条css圆角兼容ie,ie浏览器滚动条样式修改
用css怎样定义IE滚动条的样式 .testDiv{ border-style:solid; border-width:50px; border-color:pink; position:absolu ...
element-ui table 滚动条样式修改
先看效果: 思路:使用 css 样式修改滚动条  <style>/* 整体样式 */.el-table__body-w ...
element-ui滚动条样式修改
* 表单高度超出设置的长度时会出现滚动条展示:.el-table__body-wrapper {height: 60rem; //设置固定高度overflow-y: auto; //超出显示滚动条 } ...
网页滚动条样式修改 html+css
前提: ::-webkit-scrollbar这个伪类选择器能改(比如网页右侧的)滚动条样式,不过好像挺多浏览器不兼容,我也不是太熟这个属性. 用用: 对应改的部分 ::-webkit-scrollb ...

HTML滚动条样式修改

HTML滚动条样式修改相关推荐

最新文章

热门文章