html元素的overflow属性详解

最近更新时间：2018年6月20日11:39:55

《我的博客地图》

最近接手一个老项目，该项目是用EasyReport这个Web报表工具在web页面动态展示数据库数据，在开发调试过程中遇到一个问题，描述如下：

页面内子元素滚动条不出现 || 页面内父元素和子元素滚动条同时出现

开发的预期效果是：当报表表头锁定，页面出现横纵滚动条，整体可以滚动；当报表表头解锁，仅页面内报表数据内容出现横纵滚动条，可滚动。

首先，需要缕清的思路是，对于页面以及页面内任何元素，滚动条什么时候出现？滚动条什么时候隐藏？

第一，对于页面整体（也就是body）而言，如果宽高大于显示器宽高尺寸，默认会出现相应横纵滚动条；设置overflow: hidden可以隐藏横纵滚动条；

第二，对于页面内元素（可能是div）而言，如果不设置宽高，内容宽高超过显示器尺寸会隐藏并且不出现滚动条；如果设置固定宽高，同时设置overflow :hidden || scroll，则可以出现横纵滚动条；

第三，对于页面内父元素嵌套子元素而言，分为两种情况：

场景一：父元素出现横纵滚动条，子元素不出现横纵滚动条：

父元素：overflow: auto,width: fixWidth,height: fixHeight；

子元素：overflow: '',width: '',height: ''；

场景二：子元素出现横纵滚动条，父元素不出现横纵滚动条：

子元素：overflow: auto,width: fixWidth,height: fixHeight；

父元素：overflow: '',width: '',height: ''；

因此，在最开始解决这个问题的时候，思路模糊导致预期效果很难实现。如果，希望出现滚动条，需要设置overflow: auto,width: fixWidth,height: fixHeight；不希望出现滚动条，overflow: '',width: '',height: ''；

虽然出现的问题已经完美解决，但还需要对知识进行扩展和深度剖析：

第一，对于CSS样式而言：

CSS的overflow属性，表示如果内容溢出一个元素的框，会出现什么样式，该属性有5个值，分别如下：

visible-默认值。内容不会被修剪，会呈现在元素框之外。

hidden-超出内容被修剪且不可见。

scroll-超出内容被修剪但会显示滚动条来查看超出内容。

auto-如果内容超出，超出内容被修剪但会显示滚动条来查看超出内容。

inherit-从父元素继承overflow属性的值。

CSS3的 overflow-x 属性和 overflow-y 属性，表示如果内容溢出一个元素的框，是否剪辑左/右边缘或顶部/底部边缘内容，该属性有6个值，分别如下：

visible-默认值。内容不会被修剪，会呈现在元素框之外。

hidden-超出内容被修剪且不可见。

scroll-超出内容被修剪但会显示滚动条来查看超出内容。

auto-如果内容超出，超出内容被修剪但会显示滚动条来查看超出内容。

no-display-如果内容不适合内容框，则删除整个框。

no-content-如果内容不适合内容框，则隐藏整个内容。

第二，对于JavaScript操作元素overflow属性 || overflow-x属性 || overflow-y属性而言：

原生JavaScript语法设置元素overflow样式，隐藏 || 显示滚动条：

document.body.style.overlfow='hidden';//隐藏横纵滚动条

document.documentElement.style.overflowX = 'hidden';//隐藏横向滚动条

document.documentElement.style.overflowY = 'hidden';//隐藏纵向滚动条

jQuery语法设置元素overflow样式，隐藏 || 显示滚动条：

$('#div').css({'overflow':'hidden'});//隐藏横纵滚动条

$('#div').css({'overflow-x':'hidden','overflow-y':'hidden'});//隐藏横纵滚动条

第三，监听页面 || 页面内元素滚动事件：

原生JavaScript语法：

监听页面整体滚动条滚动事件，同时操作DOM元素：

window.onscroll = funcitong(){

var moveLeft = document.body.scrollLeft;//获取滚动条距离页面顶部距离

var moveTop = document.body.scrollTop;//获取滚动条距离页面左侧距离

}

监听页面内出现滚动条元素的滚动事件，同时操作DOM元素：

document.getElementById('div').onscroll = funcitong(){

var moveLeft = document.getElementById('div').scrollLeft;//获取滚动条距离元素顶部距离

var moveTop = document.getElementById('div').scrollTop;//获取滚动条距离元素左侧距离

}

jQuery语法监听滚动事件，同时操作DOM元素：

$(window).scroll(function() { });

$('#div').scroll(function() { });

$("#div").scrollLeft();//获取匹配的元素集合中第一个元素的当前水平滚动条的位置

$("#div").scrollTop();//获取匹配的元素集合中第一个元素的当前垂直滚动条的位置

$("#div").scrollLeft(300);//设置每个匹配元素的水平滚动条位置

$("#div").scrollTop(300);//设置每个匹配元素的垂直滚动条位置

第四，jQuery常用方法：

jQuery获取第一个子元素：

$('#div').children('div:first-child')；

$('#div > div').first()；

jQuery获取元素宽高：

$('#div').css('margin-top');//string类型 100px

$('#div').css('height');//string类型 100px

parseInt($('#div').css('height'));//number类型 100

$('#div').height();//number类型 100

jQuery监听input元素作为复选框时的状态变化：

$('#input').change(function(){
if($('#input').prop('checked')){

//some code

}else{

//some code

}

});

html元素的overflow属性详解相关推荐

html中overflow是什么标签,CSS中Overflow的属性是什么？Overflow属性详解
很多人学习css的时候,不太知道Overflow的属性是什么?怎么用Overflow的属性,下面Gxlcms为你总结一下Overflow属性和用法. 我们都知道,盒子的大小和盒子的位置都是可以用css ...
HTML中元素的position属性详解
HTML中元素的position属性详解转载自:https://blog.csdn.net/wangzunkuan/article/details/81540935 HTML中DOM元素有5种定位属 ...
overflow属性详解
overflow属性详解_桃花扇J的博客-CSDN博客_overflow属性原链接 overflow是对溢出内容的处理,有四个属性值visible,hidden,scroll,auto,且可以分别设 ...
CSS Overflow属性详解(转)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
Overflow属性详解(转载)
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容. 所有对象的默认值是 visible ,除了 textarea 对象和 body 对象的默认值是 auto .设置 textarea 对象此属 ...
CSS3：overflow属性详解
1.Overflow overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来: 如果内容超出容器却又不想其隐藏时可以将其属性值设 ...
qml学习笔记(二)：可视化元素基类Item详解（上半场anchors等等）
原博主博客地址:http://blog.csdn.net/qq21497936 本文章博客地址:http://blog.csdn.net/qq21497936/article/details/7851 ...
python中文读音ndarray-numpy中的ndarray方法和属性详解
NumPy数组的维数称为秩(rank),一维数组的秩为1,二维数组的秩为2,以此类推.在NumPy中,每一个线性的数组称为是一个轴(axes),秩其实是描述轴的数量.比如说,二维数组相当于是一个一维数 ...
border-sizing属性详解和应用
box-sizing 用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.它有 content-box . border-box 和 inherit 三种取值. inherit 指的是从父元素继 ...

html元素的overflow属性详解

html元素的overflow属性详解相关推荐

最新文章

热门文章