css 横向、纵向滚动条
注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值只介绍Google浏览器滚动条样式,常用属性如下)
::-webkit-scrollbar | 滚动条整体样式 |
::-webkit-scrollbar-button | 一设置滚动条样式,滚动条两端的按钮图标就消失,但可以重新设置图片、新样式 |
::-webkit-scrollbar-track | 外层轨道 |
::-webkit-scrollbar-track-piece | 内层轨道,它会覆盖外层轨道 scrollbar-track 的样式 |
::-webkit-scrollbar-thumb | 滑块 |
::-webkit-scrollbar-thumb:hover | 滑块悬浮 |
::-webkit-scrollbar-thumb:vertical:hover | 纵向滑块悬浮 |
::-webkit-scrollbar-thumb:horizontal:hover | 横向滑块悬浮 |
::-webkit-scrollbar-corner |
边角,两个滚动条交汇处 |
注意:(滚动条设置的width、height,分别是对应纵向滚动条 宽度、横向滚动条 高度,无法修改纵向滚动条高度、横向滚动条宽度数值)
/* 1,滚动条 */
::-webkit-scrollbar {width: 20px; /* 纵向滚动条 宽度 */height: 15px; /* 横向滚动条 高度 */background: pink; /* 整体背景 */border-radius: 10px; /* 整体 圆角 */
}
注意:滚动条两端的按钮也存在上述情况
/* 2,滚动条两端的按钮 */
::-webkit-scrollbar-button{width: 30px; /* 横向滚动条 宽度 */height: 20px; /* 纵向滚动条 高度 */background: black;border-radius: 10px;
}
下图为一个实例,感兴趣的可以尝试,贴出源码
<!DOCTYPE html>
<html add="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><!-- 1. 导入Vue包 --><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><style>#app>div {float: left;width: 400px;height: 400px;margin-top: 100px;}.frame {background: yellow;position: relative;}.contentbox {width: 100%;height: 100%;overflow-x: scroll;overflow-y: scroll;/*三角箭头的颜色*/scrollbar-arrow-color: #bec5ca;/*立体滚动条的颜色*/scrollbar-face-color: #bec5ca;/*立体滚动条亮边的颜色*/scrollbar-3dlight-color: #bec5ca;/*滚动条空白部分的颜色*/scrollbar-highlight-color: #bec5ca;/*立体滚动条阴影的颜色*/scrollbar-shadow-color: #bec5ca;/*立体滚动条强阴影的颜色*/scrollbar-darkshadow-color: #bec5ca;/*立体滚动条背景颜色*/scrollbar-track-color: #e5e7eb;/*滚动条的基本颜色*/scrollbar-base-color: #e5e7eb;}.item {width: 400px;height: 200px;background: green;position: relative;border: 1px solid blue;}/* 1,滚动条 */::-webkit-scrollbar {width: 20px;/* 纵向滚动条 宽度 */height: 15px;/* 横向滚动条 高度 */background: pink;/* 整体背景 */border-radius: 10px;/* 整体 圆角 */}/* 2,滚动条两端的按钮 */::-webkit-scrollbar-button {width: 30px;/* 横向滚动条 宽度 */height: 20px;/* 纵向滚动条 高度 */background: black;border-radius: 10px;}/* 3,外层轨道 */::-webkit-scrollbar-track {/* background: red; */border-radius: 10px;}/* 4.内层轨道,它会覆盖外层轨道的样式。 */::-webkit-scrollbar-track-piece {width: 5px;background-color: red;margin: 0 -2px 0;}/* 5,滑块 */::-webkit-scrollbar-thumb {background: #bec5ca;min-height: 50px;min-width: 50px;border-radius: 10px;}/* 纵向滑块悬浮 */::-webkit-scrollbar-thumb:vertical:hover {background: yellow;}/* 横向滑块悬浮 */::-webkit-scrollbar-thumb:horizontal:hover {background: pink}/* 6,边角,两个滚动条交汇处 */::-webkit-scrollbar-corner {background: blue;}</style></head><body><!-- 2. 创建一个要控制的区域 --><div id="app"><div class="frame" ref="frame"><div class="memo">这是一个memo</div><div class="arrow" v-show="flag" ref="arrow"></div><div class="contentbox" ref="contentbox"><div class="item" v-for="(item,i) in list" :key="item.id"><div class="title">{{item.title}}</div><div class="content">{{item.content}}</div></div></div></div></div><script>var vm = new Vue({el: '#app',data: {list: [{ id: '1', title: '标题1', content: '内容1' },{ id: '2', title: '标题2', content: '内容2' },{ id: '3', title: '标题3', content: '内容3' },{ id: '4', title: '标题4', content: '内容4' },{ id: '5', title: '标题5', content: '内容5' },{ id: '6', title: '标题6', content: '内容6' }],},mounted() {},methods: {},})</script></body>
</html>
css 横向、纵向滚动条相关推荐
- html 纵向滚动条,css设置纵向滚动条
css 怎样设置总是显示竖滚动条 给元素设置样式overflow-y:scroll; 和一个高度,当内容填满后就会出现下拉的滚动条了. CSS 如何添加水平滚动条 CSS 如何添加水平滚动条 我知道怎 ...
- 【js组件】仿照steam样式制造自定义横向纵向滚动条
chrome支持部分的滚动条修改,但是很多浏览器内核不支持,所以使用js自定义滚动条. 1.横向自定义滚动条 这是未添加数据未更新的时候的样子 添加数据后使用update方法,滚动条长度自动变 下载链 ...
- Vue ElementUI el-scrollbar 嵌套 el-tree 出现适宜横向纵向滚动条的方案
Vue页面<template lang="html"></template>里部分相关代码. 示例代码: <div id="listTree ...
- Vue ElementUI el-scrollbar 嵌套 el-tree 出现横向纵向滚动条
vue页面 <div style="height: 400px"><el-scrollbar style="height: 100%"> ...
- JS 横向纵向滚动条
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- element的滚动去掉横向_textarea去掉滚动条 textarea横向或纵向滚动条的去掉方法
在IE下文本框textarea会显示滚动条(如下:) 去掉textarea横向或纵向滚动条办法: 可以通过overflow-x:hidden和overflow-y:hidden控制横向和纵向滚动条 要 ...
- html表格不能横向自动展示,layui数据表格table横向滚动条不显示纵向滚动条显示不完整...
layui数据表格table横向滚动条不显示纵向滚动条显示不完整 layui数据表格table横向滚动条不显示,纵向滚动条显示不完整 需要把heigh高度写死 table.render({ elem: ...
- 给表格加上横向、纵向滚动条并对滚动条进行美化
本文demo基于vue开发,可以根据自己的框架整理,本demo满足以下几点 1.表格横向纵向都有滚动条: 2.滚动条美化: 3.固定列设置,本demo固定列举例为第一列: <template&g ...
- html纵向滚动条隐藏,隐藏横向滚动条或纵向滚动条的解决方案
在WEB实际开发过程中,特别是在iframe引用其它网页时,可能大家遇到过这样的问题,当您的页面在框架中的时候,即使您的所有的控件的宽度都没有超过屏幕宽度(一般设置为100%),但横向滚动条依然出现. ...
最新文章
- 递归实现显示目标文件夹的所有文件和文件夹,并计算目标文件夹的大小
- 反射学习4-通过反射机制动态创建和访问数组
- Python中的if __name__ == ‘__main__‘
- COCO数据集annotation标注信息详解======转载!
- tcp/ip协议包含哪几层_TCP/IP协议的简单介绍
- abstract类中不可以有private的成员_别再说你不懂java面向对象了,阿里P7大佬一次性给你讲的明明白白
- XenServer 6.5实战系列之三:Prepare for XenServer 6.5
- 【CodeForces - 1042A】Benches (优先队列,思维模拟,maxmin问题)
- c++如何让字符串重复输出_python编程入门八:列表、元组、字符串的转换及补充方法...
- RxJava应该如何理解
- 多线程的那点儿事(之无锁队列)
- 20面向对象三特征 之继承 方法重写 super
- 问答项目---登陆验证码点击切换及异步验证验证码
- 又是Access做怪,DateTime类型操作失败
- php 高并发解决方案(用于抢购)
- python数据建模与预测_Python建模复习:预测型数据挖掘
- 布局万花筒:UIColletionview
- 学习笔记 java学习(三)
- python 基于PHP在线音乐网站
- 多麦克风做拾音的波束_乱侃外设 篇四十二:一浪更比一浪强!HyperX Quadcast S 声浪加强版麦克风浅评...
热门文章
- Mysql组复制(MGR)——前提及限制
- python计算机视觉--全景图像拼接
- 安防厂商网络摄像机常用rtsp地址及端口
- Python爬虫神器pyppeteer,对 js 加密降维打击
- 盛元广通医院实验室设备预约管理系统
- python白噪声检验_时间序列 平稳性检验 白噪声 峰度 偏度
- HTML5输入框里加图片代码,做了一个input上传加号框,图片上传后显示在框中,怎么让加号消失?...
- 云宏与航天科工706所一起获得2018年国家发改委“互联网+”重大工程项目支持
- root账号无法通过SSH登录阿里云ECS
- Markdown小菜狗子笔记