css滚动条

代码如下： 　　<divclass="inner"> 　　<divclass="innerbox"> 　　<pstyle="height:200px;">这是内容111</p> 　　<pstyle="height:400px;">这里是内容222</p> 　　<p>这里是内容333</p> 　　</div> 　　</div> 　　 　　.inner{ 　　width:265px; 　　height:400px; 　　position:absolute; 　　top:33px; 　　left:13px;/*cursor:pointer;*/ 　　overflow:hidden; 　　} 　　.innerbox{ 　　overflow-x:hidden; 　　overflow-y:auto; 　　color:#000; 　　font-size:.7rem; 　　font-family:"\5FAE\8F6F\96C5\9ED1",Helvetica,"黑体",Arial,Tahoma; 　　height:100%; 　　}/*滚动条样式*/ 　　.innerbox::-webkit-scrollbar{/*滚动条整体样式*/ 　　width:4px;/*高宽分别对应横竖滚动条的尺寸*/ 　　height:4px; 　　} 　　.innerbox::-webkit-scrollbar

某厂面试归来，发现自己落伍了！>>> .test-5::-webkit-scrollbar { /*滚动条整体样式*/ width : 10px ; /*高宽分别对应横竖滚动条的尺寸*/ height : 1px ; } .test-5::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius : 10px ; background-color : skyblue ; 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 ) ; } .test-5::-webkit-scrollbar-track { /*滚动条里面轨道*/ box-shadow : inset 0 0 5px rgba ( 0 , 0 , 0 , 0.2 ) ; background : #ededed ; border-radius : 10px ; } 来源：

注意点： 1.overflow-x,overflow-y, 当两者不同时，一方被设置为visible，另一个被赋值为hidden、scroll、auto，那么这个visible会被重置为auto 2.overflow前提： （1）非display ：line （2）对应方位的尺寸限制 （3）对于单元格td等，还需要设置table的table-layout:fixed才行 3.IE7，button按钮，文字越多，按钮的padding越大，添加css样式overflow:visible就正常了。 4.无论什么浏览器，默认滚动条都来自于html，而非body。表现为：body默认margin0.5em，而有垂直滚动条的时候，滚动条是紧靠右边的，没有0.5em的间距 5.IE7-,默认滚动条一直出现，效果类似overflow-y:scroll,(overflow-y在IE8+才支持)，IE8+则是默认overflow-y:auto。故去除页面默认滚动条的时候，html{overflow:hidden}就行。 6.JS获取滚动条的高度 Chrome：document.body.scrollTop 其它：document.documentElement.scrollTop 而这两者在很多版本的浏览器不一定是同时支持的 所以：滚动条高度=document.body.scrollTop|

导读：overflow属性一般用来隐藏超过div范围的元素，包括不隐藏(visible)，直接隐藏(hidden)，用滚动条隐藏(scroll)，自动(aotu)这四个属性。当然overflow的用法并不是如此简单的理解，在很多制作网页的场合我们都需要用overflow，本文介绍overflow的四种常用属性值以及使用。 根据CSS的盒模型概念，页面中的每个元素，都是一个矩形的盒子。这些盒子的大小、位置和行为都可以用CSS来控制。对于行为，我的意思是当盒子内外的内容改变的时候，它如何处理。 比如，如果你没有设置一个盒子的高度，该盒子的高度将会根据它容纳内容的需要而增长。但是当你给一个盒子指定了一个高度或宽度而里面的内容超出的时候会发生什么？这就是该添加CSS的overflow属性的时候了，它允许你设定该种情况下如何处理。 overflow属性有四个值： visible (默认), hidden , scroll , 和 auto 。同样有两个overflow的姐妹属性overflow-y 和overflow-x，它们很少被采用。 让我们分别看一下这几个值，并讨论一写共同用法和技巧。 Visible 如果你不设置overflow属性，则默认的overflow属性值就是visible。所以一般而言

今天在写项目的时候发现一个很奇怪的事情,那就是我的横向滚动条怎么也没办法出来,大概的结构如下 css代码如下: 然后页面显示如下: 然后我把li中的float:right注释掉换成display:line-block就好了. 修改后的css样式如下: 然后页面中的ul也成功的出现了横向滚动条 总结:在ul中li出现想要出现横线滚动条但是效果失效的情况下,不妨试着将li转换为行内块级元素 可能是我css没有学到位,其中的原理我不懂,只能算瞎猫碰上死耗子出来了.嘿嘿 在这里写一个博客记录一下,h5小白的日常 … 日常报错一错就是一天 … 我会努力的! 来源： CSDN 作者： 薛染 链接： https://blog.csdn.net/bobringtheboys/article/details/104043748

直接粘代码拉,这个仅仅适用于IE 转载请注明 http://netsos.cnblogs.com/ div { scrollbar-3dlight-color:#000000; scrollbar-highlight-color:#cccccc; scrollbar-face-color:#000000; scrollbar-arrow-color:#ffffff; scrollbar-shadow-color:#666666; scrollbar-darkshadow-color:#999999; scrollbar-track-color:#dddddd; height:100px; width:400px; padding:100px 0 0 0; border:1px solid #666666; overflow:scroll; } </ style > </ head > < body > < div > 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> 这里是元素内容部分 < br /> </ div > </ body > 火狐的还没试呢，看看吧

chrome内核浏览器可以修改滚动条样式，只需要几句css即可实现，下面列出常用的修改样式： // 滚动条整体宽度::-webkit-scrollbar { width: 8px; }// 滚动条滑槽样式 ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 8px; }// 滚动条样式 ::-webkit-scrollbar-thumb { border-radius: 8px; background: #ddd; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:hover{ background: #ccc; } ::-webkit-scrollbar-thumb:active{ background: #999; }// 浏览器失焦的样式 ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); } 来源： https://www.cnblogs.com/neeter/p/12157422.html

.oLi-lists-scroll::-webkit-scrollbar { width:5px; padding:1px; background:url(../images/repeat-bar.png) repeat-y;} /* Track */ .oLi-lists-scroll::-webkit-scrollbar-track {height:4px;} /* Handle */ .oLi-lists-scroll::-webkit-scrollbar-thumb { background:url(../images/repeat-bar01.png) repeat-y; border-radius:2px; width:4px; border-left:1px solid #bfc8d2} 在设置overflow-y:auto的情况下，实现当内容多的时候加上滚动条，内容少的时候，去掉滚动条： <div class="a b">内容</div> .a{ overflow:hidden} .a.b{overflow-y:auto}; 来源： https://www.cnblogs.com/jiangtuzi/p/3758373.html

1、完全隐藏 在 <boby> 里加入 scroll="no" ，可隐藏滚动条； <boby scroll="no"> 2、在不需要时隐藏 指当浏览器窗口宽度或高度大于页面的宽或高时，不显示滚动条； 反之，则显示； <boby scroll="auto"> 3、样式表方法 在 <boby> 里加入 style="overflow-x:hidden" ，可隐藏水平滚动条； 加入 style="overflow-y:hidden" ，可隐藏垂直滚动条。 被包含页面里加入 <style> html { overflow-x:hidden; } </style> 4、另一种方法 <style type="text/css"> body { overflow-x:hidden; overflow-y:hidden; 来源： https://www.cnblogs.com/sylys/p/12125333.html

CSS宽高比为百分比时 元素宽高以百分比设置时的大小相对谁来确定 《–（点击跳转） 转自 http : / / www . divcss5 . com / rumen / r403 . shtml 绝对定位与相对定位 CSS position绝对定位absolute relative 《–（点击跳转） absolute与fixed fixed:固定定位 absolute:绝对定位 区别很简单： 1、没有滚动条的情况下没有差异 2、在有滚动条的情况下，fixed定位不会随滚动条移动而移动，而absolute则会随滚动条移动 常用场合： 1.fixed常用于网站边缘的公司联系方式和快速回到顶部 2.absolute常用于页面 absolute 比如咱们在刷QQ空间的时候，每个好友的说说就是absolute的。你往下滑过了他的动态，你想看到就得往上滑回去。 fixed fixed的呢，就比如（这里是手机QQ举例啊）默认是右下角的一个 小聊天泡 窗口 就是那个你点开它会显示你的消息 ，会随着你的屏幕滑动始终保持在屏幕的右下角。 尽管你已经刷过了好几条说说了 。 来源： CSDN 作者： 小莫神和他的的 链接： https://blog.csdn.net/qq_40710190/article/details/103760533