css滚动条 | 易学教程

css修改滚动条,适用于小程序

阅读更多关于 css修改滚动条,适用于小程序

截图: 代码 ::-webkit-scrollbar { height: 3rpx; max-width: 3rpx; } ::-webkit-scrollbar-track { background-color: #bee1eb; } ::-webkit-scrollbar-thumb { background-color: #00aff0; } ::-webkit-scrollbar-thumb:hover { background-color: #9c3 } ::-webkit-scrollbar-thumb:active { background-color: #00aff0 } /* 隐藏滚动条 */ /* ::-webkit-scrollbar { width: 0; height: 0; color: transparent; } */ 效果截图: 来源： https://www.cnblogs.com/han-guang-xue/p/11776803.html

overflow:atuo;隐藏滚动条

阅读更多关于 overflow:atuo;隐藏滚动条

动端页面为了更接近原生的体验，是否可以隐藏滚动条，同时又保证页面可以滚动？由于只需要兼容移动浏览器（Chrome 和 Safari），于是想到了自定义滚动条的伪对象选择器 : :-webkit-scrollbar 。 1 应用如下 CSS 可以隐藏滚动条： . element: :-webkit-scrollbar { display: none} 1 如果要兼容 PC 其他浏览器（IE、Firefox 等），国外一位才人 John Kurlak 也研究出了一种办法。在容器外面再嵌套一层 overflow:hidden 内部内容再限制尺寸和外部嵌套层一样，就变相隐藏了。 < div class = "outer-container" > < div class = "inner-container" > < div class = "content" > ...... </ div > </ div > </ div > .outer-container,.content { width: 200 px; height: 200 px; } .outer-container { position: relative; overflow: hidden; } .inner-container { position: absolute; left: 0 ; overflow-x:

解决移动端浏览器页面 X轴横向滚动条问题

阅读更多关于解决移动端浏览器页面 X轴横向滚动条问题

写web端页面的时候，总是会出现横向滚动条，即 X 轴滚动条，导致页面左右滑来滑去。解决代码： html { overflow-y: scroll; } :root { overflow-y: auto; overflow-x: hidden; } :root body { position: absolute; } body { width: 100vw; overflow: hidden; } 内容参考自张鑫旭大神的《小tip:CSS vw让overflow:auto页面滚动条出现时不跳动》

css滚动条样式修改

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

.scroll::-webkit-scrollbar { // 纵向滚动条和横向滚动条宽度 width: 1px; height: 1px;}.scroll::-webkit-scrollbar-thumb { // 滚动条背景条样式 border-radius: 1px; -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); background: #5b5f63;}.scroll::-webkit-scrollbar-track { // 滚动条按钮样式 -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); border-radius: 1px; background: #00284d;} 一条很窄的滚动条来源： https://www.cnblogs.com/zhanyuefeixian/p/11758693.html

【css】样式

阅读更多关于【css】样式

1、背景颜色渐变情况 background: linear-gradient(to left,#FA4DBE 0,#FBAA58 100%); border-bottom-color: transparent; padding: 8px 10px 2、滚动条的出现 .nav_lf{ width:0.8rem; background:#F4F4F4; height:100%; overflow: hidden; overflow-y: auto; position: fixed; left: 0; top: 0; z-index:0; } 来源： https://www.cnblogs.com/yuanjili666/p/11594831.html

css隐藏滚动条（webkit和非webkit）

阅读更多关于 css隐藏滚动条（webkit和非webkit）

1.移动端或者谷歌浏览器（webkit内核） ::-webkit-scrollbar { display: none; } 2.兼容所有浏览器的css写法 demo： html部分： <div class="outsideBox"> <div class="centerBox"> <div class="insideBox"></div> </div> </div> CSS部分： .outsideBox{ width: 200px; height: 200px; overflow: hidden; position: relative; margin-left:-20px; margin-top:-20px; .centerBox{ position: absolute; left:20px; top:20px; width: 200px; height: 200px; overflow: scroll; margin-right: -15px; margin-bottom: -15px; .insideBox{ width: 400px; height: 400px; background: radial-gradient(red, green, blue); /* 标准的语法 */ } } } 来源： https://www.cnblogs.com/miaSlady/p

css滚动条样式

阅读更多关于 css滚动条样式

原文地址：http://visugar.com/2017/08/18/20170818CustomScroll/ 　　　　 https://www.jianshu.com/p/99968cfc7675 写在前面滚动条是个很常见的东东，不过某些浏览器自带的滚动条确实不太好看啊，下面可以作为学习，探讨下自定义滚动条的实现，这样你的滚动条就可以美美的啦。但是，也只能玩玩，因为只针对webkit内核的浏览器啊啊啊啊啊！ overflow介绍定义：overflow 属性指定当它溢出其块级容器时,是否剪辑内容，渲染滚动条或显示内容。属性值 overflow:visible //默认值。内容不会被修剪，超出内容会显示在元素框之外 overflow:hidden //内容会被修剪。超出内容被隐藏 overflow:scroll //内容会被修剪，浏览器会显示滚动条以便查看其余内容 overflow:auto //如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 overflow:inherit //规定从该父元素继承overflow属性的值注：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"。当overflow设为除默认值（visible）以外的值时，将会创建一个会块级式化上下文（清除浮动的一种方式）

css 滚动条样式

阅读更多关于 css 滚动条样式

<!DOCTYPE html>  <html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>CSS3自定义滚动条-轩枫阁</title> <style> header { font-family: 'Lobster', cursive; text-align: center; font-size: 25px; } #info { font-size: 18px; color: #555; text-align: center; margin-bottom: 25px; } a{ color: #074E8C; } .scrollbar { margin-left: 30px; float: left; height: 300px; width: 65px; background: #F5F5F5; overflow-y: scroll; margin-bottom: 25px; } .force-overflow { min-height: 450px; }

css _滚动条样式

阅读更多关于 css _滚动条样式

/*滚动条整体部分定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 12px; } /* 滚动条的轨道内阴影+圆角*/ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px #929C9C; -webkit-border-radius: 5px; border-radius: 5px; } /* 滚动条里面的滑块内阴影+圆角*/ ::-webkit-scrollbar-thumb { -webkit-border-radius: 5px; border-radius: 5px; background: inset 0 0 6px #00ABA2; -webkit-box-shadow: inset 0 0 6px #00ABA2; } /*当焦点不在当前区域滑块的状态*/ ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } /*滚动条上半边或左半边 ::-webkit-scrollbar-track-piece:start { background: rgba(11,10,100,0.4); }*/ ::-webkit-scrollbar

<iframe>和<frame>标签属性详解

阅读更多关于和标签属性详解

iframe>元素会创建包含另外一个文档的内联框架（即行内框架）；一、align 属性（不赞成） align属性规定iframe相对于周围元素的水平和垂直对齐方式，因为iframe元素是行内元素，即不会在页面上插入新行，这意味着文本和其他元素可以围绕在其周围，所以align属性可以规定iframe相对于周围元素的对齐方式；二、frameborder属性 frameborder属性规定是否显示iframe周围的边框，但出于实用性方面的原因，最好不用设置该属性，而使用CSS来设置边框,是否显示边框：1(yes),0(no)； <html> <body> <iframe src ="/index.html" width="400" height="300" frameborder="0"> <p>Your browser does not support iframes.</p> </iframe> </body> </html> 　　三、height 属性规定 iframe 的高度； <html> <body> <iframe src ="/index.html" width="400px" height="500px"> <p>Your browser does not support iframes.</p> </iframe> </body> </html> 四