滚动条 | 易学教程

CSS3自定义滚动条样式 -webkit-scrollbar

阅读更多关于 CSS3自定义滚动条样式 -webkit-scrollbar

http://blog.csdn.net/hanshileiai/article/details/40398177#t1 有没有觉得浏览器自带的原始滚动条很不美观，同时也有看到很多网站的自定义滚动条显得高端，就连chrome32.0开发板都抛弃了原始的滚动条，美观多了。那webkit浏览器是如何自定义滚动条的呢？前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、 demo2（纯CSS3版）滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit

CSS3自定义滚动条样式 -webkit-scrollbar

阅读更多关于 CSS3自定义滚动条样式 -webkit-scrollbar

::-webkit-scrollbar {/*隐藏滚轮*/ display: none; } 前言 webkit支持拥有overflow属性的区域，列表框，下拉菜单，textarea的滚动条自定义样式，所以用处还是挺大的。当然，兼容所有浏览器的滚动条样式目前是不存在的。演示来看看这2个滚动条demo： demo1（图片版）、 demo2（纯CSS3版）滚动条组成 ::-webkit-scrollbar 滚动条整体部分 ::-webkit-scrollbar-thumb 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条） ::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） ::-webkit-scrollbar-button 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。 ::-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去） ::-webkit-scrollbar-corner 边角，即两个滚动条的交汇处 ::-webkit-resizer 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件简洁版这里就不贴出详细代码了，demo里面可以通过查看源码寻找具体样式的设置。来看看demo2中第二个滚动条的样式 /*定义滚动条高宽及背景

chrome和IE下的滚动条样式修改

阅读更多关于 chrome和IE下的滚动条样式修改

火狐下的滚动条样式无法去修改，但chorme下的则可以任意修改，惊喜的是IE竟然是最早实现这一功能的浏览器，IE5都能有效果。 chorme下的滚动条样式修改： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /*滚动条整体部分,必须要设置*/ ::-webkit-scrollbar{ width: 10px; height: 10px; background-color: #333; } /*滚动条的轨道*/ ::-webkit-scrollbar-track{ box-shadow: inset 0 0 5px rgba(0,0,0,.3); background-color: #67687D; } /*滚动条的滑块按钮*/ ::-webkit-scrollbar-thumb{ border-radius: 10px; background-color: #DE6B90; box-shadow: inset 0 0 5px #000; } /*滚动条的上下两端的按钮*/ ::-webkit-scrollbar-button{ height: 10px; background-color: #B0AEDA;

网页滚动条样式 overflow 转

阅读更多关于网页滚动条样式 overflow 转

转自 http://hi.baidu.com/uecd/home " 一、首先来了解一下overflow overflow：内容溢出时的设置，可以设置对象是否显示滚动条， overflow-x：指水平方向内容溢出时的设置 overflow-y：指垂直方向内容溢出时的设置它们设置的值为visible、scroll、hidden、auto。 visible是默认值。使用这个值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都会被强制显示出来。 hidden效果与visible相反。任何超出"width"和"height"的内容都会不可见。 scroll无论内容是否超出范围，都会显示滚动条。 auto当内容超出范围时，自动显示滚动条，否则不显示。例如： 1.浏览器窗口不出现滚动条： a.没有水平滚动条：<body style="overflow-x:hidden"> b.没有垂直滚动条：<body style="overflow-y:hidden"> c.没有滚动条：<body style="overflow-x:hidden;overflow-y:hidden"> 或<body style="overflow:hidden"> 2.让多行的文本隐藏滚动条： a.没有水平滚动条：<textarea style="overflow-x:hidden"

修改滚动条样式

阅读更多关于修改滚动条样式

/*滚动条样式*/::-webkit-scrollbar { /*滚动条整体样式*/ width: 10px; /*高宽分别对应横竖滚动条的尺寸*/ height: 10px;}::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ background: #e5e5e5; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}::-webkit-scrollbar-thumb:hover { /*滚动条里面小方块*/ background: #cfcfcf; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px;}::-webkit-scrollbar-track { /*滚动条里面轨道*/ background: #F4F4F4;}/*::-webkit-scrollbar-button { !* 滚动条两端的按钮 *! width: 10px; }*/ 来源： https://www.cnblogs.com/maoyazhi/p/8760362.html

修改滚动条的样式

阅读更多关于修改滚动条的样式

1.滚动条设置为透明（less语法） .scrollbar() { &::-webkit-scrollbar { width: 0.16rem; background-color: transparent; } &::-webkit-scrollbar-track { background-color: transparent; } &::-webkit-scrollbar-thumb { border-radius: 0.08rem; background-color: rgba(255, 255, 255, 0); box-shadow: 0px 1px 3px 0px rgba(44, 47, 49, 0); } /*滚动条的上下两端的按钮*/ &::-webkit-scrollbar-button { height: 0px; } } 2.设置有颜色的滚动条 &::-webkit-scrollbar { width: 0.16rem; background: rgba(117, 180, 253, 0.2); box-shadow: 0rem 0.01rem 0.01rem 0rem rgba(1, 69, 132, 0.5); border-radius: 0.08rem; } &::-webkit-scrollbar-track { background-color:

前端滚动条的样式

阅读更多关于前端滚动条的样式

一、滚动条滚动条是对于固定高度，当内容溢出的时候，出现滚动条。默认的滚动样式：我们可以进行滚动条的定义 css 样式： 1 <style> 2 .inner{ 3 width: 265px; 4 height: 400px; 5 position: absolute; 6 top: 33px; 7 left: 13px; 8 /*cursor: pointer;*/ 9 overflow:hidden; 10 } 11 .innerbox{ 12 overflow-x: hidden; 13 overflow-y: auto; 14 color: #000; 15 font-size: .7rem; 16 font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma; 17 height: 100%; 18 } 19 /*滚动条样式*/ 20 .innerbox::-webkit-scrollbar {/*滚动条整体样式*/ 21 width: 13px; /*高宽分别对应横竖滚动条的尺寸*/ 22 height: 4px; 23 } 24 .innerbox::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ 25 border-radius: 5px; 26 -webkit-box

防抖函数与节流函数

阅读更多关于防抖函数与节流函数

应用场景实际工作中，我们经常性的会通过监听某些事件完成对应的需求，比如：通过监听 scroll 事件，检测滚动位置，根据滚动位置显示返回顶部按钮通过监听 resize 事件，对某些自适应页面调整DOM的渲染（通过CSS实现的自适应不再此范围内）通过监听 keyup 事件，监听文字输入并调用接口进行模糊匹配 ... 常规实现，以监听 scroll 事件为例　　我们先来看一下scroll事件的触发频率　　 window.onscroll = function () { //滚动条位置 let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 　　console.log('滚动条位置：' + scrollTop); } 效果如下：从效果上，我们可以看到，在页面滚动的时候，会在短时间内触发多次绑定事件。我们知道DOM操作是很耗费性能的，如果在监听中，做了一些DOM操作，那无疑会给浏览器造成大量性能损失。下面我们进入主题，一起来探究，如何对此进行优化。函数防抖定义：多次触发事件后，事件处理函数只执行一次，并且是在触发操作结束时执行。原理：对处理函数进行延时操作，若设定的延时到来之前，再次触发事件，则清除上一次的延时操作定时器，重新定时。 var timer;

关于element ui滚动条使用

阅读更多关于关于element ui滚动条使用

element ui 自带的滚动条使用在容器的直接外层添加（需要展现滚动条的那一级） <el-scrollbar style="height:100%"></el-scrollbar> 如果注意添加样式 height:100% 另外添加全局的样式 body .el-scrollbar__wrap { overflow-x: hidden; } 实例： <!DOCTYPE html> <html> <head> <meta charset="UTF-8">  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .el-scrollbar__wrap{ overflow-x: hidden; } </style> </head> <body> <div id="app"> <div style="height:400px;"> <el-scrollbar style="height:100%"> <div style="width:700px;height:700px;border:solid;" > ....... blabla..... </div> </el-scrollbar> </div> <

滚动条引起页面抖动问题

阅读更多关于滚动条引起页面抖动问题

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>> 项目过程中，很常见的点击按钮弹出遮罩和菜单，但同时可能会要求禁止滚动条滚动，这样可以 /* 无遮罩时 */ body { overflow: auto; } /* 有遮罩时 */ body { overflow: hidden; } 但是这样会因为滚动条的原因，使页面元素产生抖动（即页面元素产生位移）想了很多办法，最终发现： 1.使用html的滚动条代替body的滚动条 2.有遮罩时，body 设置溢出隐藏，这样html的滚动条存在，但是由于没有溢出（溢出部分已经被body隐藏了），所以html的滚动条时无法滚动的（即遮罩下面的页面内容不会滚动）代码： html { /* 滚动条一直存在，由溢出时可以滚动，无溢出时无法滚动，但是存在 */ overflow: scroll; } /* 有遮罩时 */ body { overflow: hidden; } /* 无遮罩时 */ body { overflow: auto; } 来源： oschina 链接： https://my.oschina.net/u/3108430/blog/1626274

订阅滚动条