深入理解之overflow属性（第五期）

一、overflow特征

overflow-x：hidden;/ overflow-y：hidden;，当一方被隐藏的时候，另一方会自动变成visible；
IE7浏览器下，文字越多的时候，按钮两侧的padding空白会越大。解决方法：给所有按钮添加overflow：visible;

二、overflow与滚动条

无论什么浏览器，默认滚动条来自于HTML，而不是body。
body/html与滚动条:
(1) Chrome浏览器下JS获取滚动条：document.body.scrollTop;
(2)其它浏览器：document.documentElement.scrollTop;
(3) 两者不会同时起作用，建议的兼容使用写法:
var st=document.documentElement.ScrollTop||document.body.scrollTop;
3.解决水平居中时滚动条跳动的问题

.html{overflow-y:Scroll;
}
.container{padding-ledt:calc(100vm-100%);
}

三、自定义滚动条

常用:

::-webkit-scrollbar{/*血槽宽度*/width:8px;height:9px;
}
::-webkit-scrollbar-thumb{/*拖动条*/background-color:rgba(0,0,0,.3);border-radius:6px;
}
::-webkit-scrollbar-track/*背景槽*/border-radius:6px;background-color:#ddd;
}

后排提示：之前在慕课看到了这个系列的教程，来自于张鑫旭老师，有兴趣的朋友可以搜索看看，本人在此做一个学习记录。

深入理解之overflow属性（第五期）相关推荐

DD每周前端七题详解-第五期
DD每周前端七题详解-第五期系列介绍你盼世界,我盼望你无bug.Hello 大家好!我是霖呆呆! 呆呆每周都会分享七道前端题给大家,系列名称就是「DD每周七题」. 系列的形式主要是:3道JavaS ...
第十五期“AI未来说·青年学术论坛”带你了解大数据运用
全文共1184字,预计学习时长3分钟 2020年5月30日,第15期"AI未来说·青年学术论坛"大数据专场论坛以"线上平台直播+微信社群图文直播"形式举行.本次 ...
FME模板兴趣班第五期任务小结
作者:欣欣现在每次出模板兴趣班题目的时候,其实还蛮费脑筋的,一方面希望题目能够跟大家的工作相结合:其次还要考虑不同技术水平的人都能参与进来:然后还要考虑题目的通用性,是否对大部分人都有帮助.所以很感 ...
css深入理解之overflow
第一回 overflow基本属性 overflow基本属性 visibel hidden scroll auto inherit overflow-x和overflow-y overflow-x和ov ...
正面管教php_中联重科团委快乐父母协会第五期正面管教家长基础班招募！
你是否是位新手爸妈面对家庭新成员时有些茫然无措? 你是否在辅导孩子作业时忍不住 "河东狮吼"? 你是否面对青春期的孩子时束手无策? 你是否很想平衡好工作与家庭, 在有限的时间内 ...
深入理解：overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
CSS 处理溢出 overflow属性
在CSS中,如果设置了一个盒子的宽度与高度,则盒子中的内容就可能超过盒子本身的宽度或高度.此时,可以使用 overflow 属性来控制内容溢出时的处理方式. overflow属性的可选值有 visib ...
区块链基本原理及其技术实现 - 姜家志 | JTalk 第五期
编者按:本文系比特大陆的姜家志讲师,在掘金技术社区主办的<给开发者的区块链技术指南 | JTalk 掘金线下活动第五期> 活动上的分享整理.掘金 JTalk 目前已举办5期,每期 JTal ...
第五期送书来了，这次送的都是畅销书！
点击上方"程序IT圈",选择"置顶公众号" 每天早晨8点50分,准点开车打卡公众号第四期打卡采用订阅号助手排行榜功能,参照下图所示的三个指标:精选留言最多.分 ...

深入理解之overflow属性（第五期）

一、overflow特征

二、overflow与滚动条

三、自定义滚动条

深入理解之overflow属性（第五期）相关推荐

最新文章

热门文章