html元素的overflow属性详解

深藏阁楼爱情的钟 2022-07-13 10:17 429阅读 0赞

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

[《我的博客地图》][Link 1]

最近接手一个老项目，该项目是用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

\}

\});

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440

发表评论取消回复

表情：

评论列表（有 0 条评论，429人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML CSS属性overflow、white-space、text-overflow

.li { width:20%; float:left; // 文本或图像会移至父元素中的左侧。 overflow: hidden; //

比眉伴天荒/ 2023年10月16日 22:08/ 0 赞/ 18 阅读

相关 HTML 元素的属性有哪些？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ class ⭐ id ⭐ style ⭐ src ⭐ href ⭐ alt ⭐

╰半夏微凉°/ 2023年10月14日 12:56/ 0 赞/ 75 阅读

相关 HTML 元素与属性

HTML 元素 -------------------- HTML 文档由 HTML 元素定义。 -------------------- HTML 元素 <

短命女/ 2023年10月13日 08:14/ 0 赞/ 20 阅读

相关 overflow属性详解

[overflow属性详解\_桃花扇J的博客-CSDN博客\_overflow属性][overflow_J_-CSDN_overflow] 原链接 overflow是对溢出

刺骨的言语ヽ痛彻心扉/ 2023年10月09日 15:11/ 0 赞/ 51 阅读

相关 css overflow属性

定义和用法： overflow属性规定当内容溢出元素框时发生的处理。属性值： 1：visible 默认值。内容不会被修剪，会呈现在元素

蔚落/ 2022年07月14日 09:27/ 0 赞/ 182 阅读

相关 html元素的overflow属性详解

最近更新时间：2018年6月20日11:39:55 [《我的博客地图》][Link 1] 最近接手一个老项目，该项目是用EasyReport这个Web报表工具

深藏阁楼爱情的钟/ 2022年07月13日 10:17/ 0 赞/ 430 阅读

相关 HTML5新增元素和属性详解系列之一

> 作者：李振超一、了解HTML5 > 是对 HTML 标准的第五次修订。其主要的目标是将互联网语义化，以便更好地被人类和机器阅读，并同时提供更好地支持各种媒体的嵌入

Dear 丶/ 2022年07月12日 03:57/ 0 赞/ 357 阅读

相关 HTML5元素的 data-* 属性详解

data-\ 属性是 HTML 5 的新特性，允许用户在 DOM 中存储自定义信息。以前，需要存储含有特定含义的信息通常是通过 class 完成的，但这并不是 class

快来打我*/ 2022年06月13日 06:22/ 0 赞/ 278 阅读

相关 css的overflow属性

css的overflow属性规定内容溢出元素框时，如何处理溢出内容。 overflow属性可能的值： visible：默认值，内容不会被修剪，会呈现在元素框之外。 hid

亦凉/ 2022年06月07日 05:19/ 0 赞/ 226 阅读

相关 CSS Overflow属性详解(转)

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置

深碍√TFBOYSˉ_/ 2022年04月10日 08:12/ 0 赞/ 400 阅读