原创

慕课网《CSS深入理解之overflow》

本部分来源：慕课网《CSS深入理解之overflow》

overflow基本属性值：
visible(默认)
hidden
scroll
auto
inherit(继承)

overflow:visible妙用
IE7浏览器下，文字越多，按钮两侧padding留白就越大！
而同样内容在IE8下则正常
处理：给所有按钮添加CSS样式 overflow:visible

body/html与滚动条
无论什么浏览器，默认滚动条来自<html> !而不是<body>标签
IE7-浏览器默认：html{overflow-y:scroll:}
IE8+浏览器默认：html{overflow:auto;}
所以，如果我们想要去除页面默认滚动条，只需要：
html{overflow：hidden；}

body/html与滚动条-JS与滚动高度
Chrome浏览器 document.body.scrollTop;
其他浏览器是：document.documentElement.scrollTop;
要使用：
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;

滚动条的宽度
准确说应该是滚动栏的宽度，下面方法可以简单获得
.box{width:400px;overflow:scroll;}
.in{*zoom:1 /* for IE7 */}
<div class="box">
<div id="in" class="in" > </div>
</div>
console.log(400-document.getElementById("in").clientWidth);
结果：IE7+/Chrome/FireFox(Win7)-均是17像素

水平居中跳动问题的修复
1.html{overflow-y:scroll;}
2. .container{padding-left:calc(100vw-100%) ;}
100vw-浏览器宽度;100%-可用内容宽度

自定义滚动条-webkit
整体部分
::-webkit-scrollbar
两端按钮
::-webkit-scrollbar-button
外层轨道
::-webkit-scrollbar-track
内存轨道
::-webkit-scrollbar-track-piece
滚动滑块
::-webkit-scrollbar-thumb
边角
::-webkit-scrollbar-corner

自定义滚动条-IE
此处略

jQuery滚动条自定义插件
https://github.com/malihu/malihu-custom-scrollbar-plugin
demo http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html

iOS原生滚动回调效果
-webkit-overflow-scrollling:touch

正文到此结束

所属分类：前端基础

本文标签： CSS
本文链接： https://code.jiangjiesheng.cn/article/77
版权声明： 本文由小江同学原创发布，转载请先联系本站长，谢谢。

慕课网《CSS深入理解之overflow》

热门推荐

相关文章

说给你听

本文目录

标签云

近期评论

网站信息