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

}

    });