【JS中scrollHeight/Width详解（不加定位的情况下）】

已于 2022-01-20 23:33:39 修改
阅读量1.4k 收藏
点赞数 2
分类专栏： JS 文章标签： javascript 前端 开发语言
于 2022-01-20 11:45:45 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Linxuejie_1030/article/details/122596297
版权

scrollHeight和scrollWidth的详解

由于scrollHeight和scrollWidth只是Y轴和X轴方向上的差异，其大小是一模一样的算法也仅仅只是方向上的差异，我们可以通过类比得知，这里我们只对scrollHeight来讲解，因为scrollHeight比较常用

一、 内容块Y轴上没有超出的情况下

大小：scrollHeight = 当前对象 height + padding-top + padding-bottom - x轴滚动条高度
这时候scrollHeight = clientHeight
这时候我们无论有或者没有对overflow-y进行设置都是可以的，这里使用默认值overflow-y: visible;

具体clientHeight的大小可以参考： 上一篇内容.

CSS代码如下：

#wrap {
     width: 100px;
     height: 100px;
     /* 用于Width水平方向加的 */
     padding-left: 50px;
     padding-right: 40px;
     border: solid;
     border-left-width: 35px;
     border-right-width: 25px;
     /* 用于Height垂直方向加的 */
     padding-top: 30px;
     padding-bottom: 20px;
     border-top-width: 15px;
     border-bottom-width: 5px;
}

wrap图片：
在这里插入图片描述

控制台打印结果：
在这里插入图片描述

另一种是存在滚动条的情况下

CSS代码如下：

#wrap {
    width: 100px;
    height: 100px;
    /* 用于Width水平方向加的 */
    padding-left: 50px;
    padding-right: 40px;
    border: solid;
    border-left-width: 35px;
    border-right-width: 25px;
    /* 用于Height垂直方向加的 */
    padding-top: 30px;
    padding-bottom: 20px;
    border-top-width: 15px;
    border-bottom-width: 5px;
    /* 设置了overflow */
    overflow-x: scroll;
}

wrap图片：
在这里插入图片描述
控制台打印结果：
在这里插入图片描述
通过观察可以发现，这个值和clientHeight相等，也是减去了21px（滚动条带来的差异）
且设置了①overflow-y: hidden 、②overflow-y: scroll 和③ overflow-y: auto 与未设置的情况下④overflow-y: visible（默认值）的这个值是相同的。

二、内容块Y轴上有超出的情况下

为了方便说明，我们设置了一个blk类，来填充计算其并计算scrollHeight的大小。

2.1 当 overflow-y: visible的情况

大小：scrollHeight = 父级的padding-top（不加 padding-bottom ）+ 第一个子级的margin-top + ∑每个子级的offsetHeight + ∑每个子级之间的MAX(上一个子级的margin-bottom,下一个子级的margin-top)（一般这个间隔有n-1个，n为子级数）

注：这里为什么要取上一个子级的margin-bottom和下一个子级的margin-top的最大值，是因为，纵向上的margin会合并并取最大值。

注意事项：这里的border-bottom和border-top是需要solid、dashed、double等的，不可以是transparent或者unset，若为transparent或unset则不会算上。

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #wrap {
            position: relative;
            /* top: 200px; */
            width: 100px;
            height: 100px;
            /* 用于Width水平方向加的 */
            padding-left: 50px;
            padding-right: 40px;
            border: solid;
            border-left-width: 35px;
            border-right-width: 25px;
            /* 用于Height垂直方向加的 */
            padding-top: 30px;
            padding-bottom: 20px;
            border-top-width: 15px;
            border-bottom-width: 5px;
            overflow-y: visible;
        }
        .blk {
            position: relative;
            /* top: 300px; */
            display: block;
            width: 50px;
            height: 50px;
            background-color: red;

            /* 外边距 */
            margin-top: 7px;
            margin-bottom: 10px;

            /* 内边距 */
            padding-top: 9px;
            padding-bottom: 4px;

            /* 边缘线 */
            border: dashed;
            border-top-width: 8px;
            border-bottom-width: 5px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="blk"></div>
        <div class="blk"></div>
        <div class="blk"></div>
    </div>

    <script>
        // 获取对象
        var oWrap = document.getElementById("wrap");

        console.log( "wrap.scrollHeight=" + oWrap.scrollHeight );

    </script>
</body>
</html>

wrap图片：
在这里插入图片描述

控制台打印结果：
在这里插入图片描述

由图可以看出这个值等于 30 + 7+ 76 * 3 (3个) + 20 = 285，因为第三个也就是最后一个子级margin-bottom在最底部由于不可视和父级padding-bottom一样并没有被算上。

其中：

  • 父级的padding-top:30px
  • 第一个子级的margin-top:7px
  • 每个子级的offsetHeight: （50+9+4+8+5）= 76px
  • 每个子级间的距离：10+10 = 20px = ∑MAX(上一个子级的margin-bottom,下一个子级的margin-top)

2.2 设置overflow-x: scroll、overflow-y: scroll、overflow-y: hidden 和overflow-y: auto的情况下

大小：scrollHeight = 父级的padding-top + 父级的padding-bottom + 第一个子级的margin-top + ∑每个子级的offsetHeight + ∑每个子级之间的MAX(上一个子级的margin-bottom,下一个子级的margin-top)（一般这个间隔有n-1个，n为子级数）+ 最后一个子级的margin-bottom

这里解释一下为什么会有overflow-x: scroll的原因：
因为：如果这时候为默认的overflow-y: visible, 我们给wrap添加一个overflow-x: scroll 浏览器会自行给其加一个y轴的滚动条（虽然我们这时候加的是y轴的滚动条，实际上是改变其值为overflow-y: auto; ），且经过测试这个y轴滚动条无论出现还是未出现都不会影响其scrollHeight的值，也就是说，只要你给这个标签添加了overflow-x: scroll，它的scrollHeight和后面的三者都是一样的。

注：给一个标签添加样式overflow-x: scroll 会自行强制将其overflow-y改变成auto，可以通过设置hidden或者scroll改变

HTML代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        #wrap {
            position: relative;
            /* top: 200px; */
            width: 100px;
            height: 100px;
            /* 用于Width水平方向加的 */
            padding-left: 50px;
            padding-right: 40px;
            border: solid;
            border-left-width: 35px;
            border-right-width: 25px;
            /* 用于Height垂直方向加的 */
            padding-top: 30px;
            padding-bottom: 20px;
            border-top-width: 15px;
            border-bottom-width: 5px;
            overflow-x: scroll;
        }
        .blk {
            position: relative;
            /* top: 300px; */
            display: block;
            width: 50px;
            height: 50px;
            background-color: red;

            /* 外边距 */
            margin-top: 7px;
            margin-bottom: 10px;

            /* 内边距 */
            padding-top: 9px;
            padding-bottom: 4px;

            /* 边缘线 */
            border: dashed;
            border-top-width: 8px;
            border-bottom-width: 5px;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div class="blk"></div>
        <div class="blk"></div>
        <div class="blk"></div>
    </div>

    <script>
        // 获取对象
        var oWrap = document.getElementById("wrap");

        console.log( "wrap.scrollHeight=" + oWrap.scrollHeight );

    </script>
</body>
</html>
  • 图：给overflow-y: visible(默认值)的标签添加overflow-x: scroll后，overflow-y将自动改变为atuo
    在这里插入图片描述

控制台打印结果：
在这里插入图片描述

这个值就等于 30 + 7 + 76 * 3 + 20 + 10 + 20 = 315

其中：

  • 父级的padding-top:30px
  • 第一个子级的margin-top:7px
  • 每个子级的offsetHeight: （50+9+4+8+5）= 76px
  • 每个子级间的距离：10+10 = 20px = ∑MAX(上一个子级的margin-bottom,下一个子级的margin-top)
  • 最后一个子级的margin-bottom:10px
  • 父级的padding-bottom: 20px

注：上述的部分是建立在没有定位的情况下说明，
若子级加了定位后超出的部分的算法比较特殊，需要根据具体情况分析喔~

到这里大家应该对scrollHeight和scrollWidth有了深刻的了解啦，祝大家开开心心每一天，一起加油哦！！！

Linxuejie_1030
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解js动态获取浏览器或页面等容器的宽高
12-04
- `document.body.scrollWidth` 和 `document.body.scrollHeight`: 这两个属性分别返回网页的完整宽度和高度，包括不可见部分，如滚动条下的内容。 3. **滚动位置** - `document.body.scrollTop` 和 `document....
JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解
我是张跑跑
01-07 1万+
1. 总述 在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的，因此在本博文中详细的介绍并给出实例。 以上的4个属性是成对出现的，因此下面介绍中也成对的介绍，在实例中为了减少代码量，我直接用的id，实际开发中不推荐。 2. scrollWidth和scrollHeight 2.1 概念 element...
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决
热门推荐
郑伟斌的博客
04-09 2万+
JS中clientHeight、scrollHeight和offsetHeight的大坑，滚动条抖动问题解决1.什么是clientHeight、scrollHeight和offsetHeight1.1 clientHeight是什么1.2 offsetHeight是什么1.3 clientHeight和offsetHeight的注意点1.4 scrollHeight和它的大坑jQuery和原生js...
JS高级使用3.0——JS中获取页面的高度、距离顶部的距离
最新发布
蓝桉
05-04 1294
获取距离顶部的距离可视区高度滚动条总高度滚动页面scroll()scrollTo()scrollBy()
js中关于scrollHeight，scrollwidth,scrollLeft,scrollTop的属性使用
m0_56132701的博客
01-06 1968
element.scrollHeight属性返回整个元素的总高度， element.scrollWidth属性返回整个元素的总宽度。如果元素没有发生溢出（没出现滚动条），那么scrollHeight和clientHeight是相等的，scrollWidth属性与clientWidth属性是相等的。element.scrollLeft属性表示元素的水平滚动条向右侧滚动的距离，element.scrollTop属性表示元素的垂直滚动条向下滚动的距离。如果没有出现滚动条，那上面的两个属性值就是0。
JS中scrollHeight,clientHeight、scrollTop、offsetTop等相关属性介绍
何以为皇的博客
10-25 3470
获取页面可视高度 document.getElementById("#id").clientHeight 获取当前dom元素的可滚动高度 document.getElementById("#id").scrollHeight 获取当前dom元素的滚动距离 document.getElementById("#id").scrollTop scrollHeight = scrollTop + clientHeight ...
【JavaScript】scrollTop和scrollHeight
小秀的博客
06-24 2782
scrollTop和scrollHeight
js 中 clientHeight、scrollHeight 等获取的高度的区别和使用
qq_40072782的博客
04-22 1140
1、 clientHeight 在盒模型中，代表元素的高度加内边距。 语法： var elmnt = document.getElementById("content"); element.scrollHeight; 2、scrollHeight 代表元素的像素高度，值等于该元素在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度 不包含外边距（margin）、边框（border） 使用场景： 比如同一区域，一个标题和摘要，默认标题1行摘要2行，当标题超过2行，摘要就一行。 css 标题样式：m
如何设置iframe高度自适应在跨域情况下的可用方法
09-05
然而，当涉及到iframe的高度自适应时，如果子页面与父页面不在同一个域名下，就会出现JavaScript跨域问题，导致父页面无法直接获取子页面的高度信息。解决这个问题有多种策略，以下是一些常用的方法： 1. **...
详解HTML5将footer置于页面最底部的方法(CSS+JS)
12-14
在网页设计中，确保页脚始终位于页面底部是常见的需求，尤其在响应式设计中更为重要。HTML5虽然没有直接提供让页脚固定在底部的功能，但可以通过CSS和JavaScript的结合来实现这一效果。本文将详细讲解如何使用这两种...
iframe标签用法详解(属性、透明、自适应高度)
09-28
在某些情况下，可能需要处理跨域问题，因为浏览器的安全策略可能阻止读取跨域`iframe`的尺寸。 ```javascript function resizeIframe(iframe) { iframe.style.height = iframe.contentWindow.document.body....
jQuery遮罩层实现方法实例详解(附遮罩层插件)
11-24
在网页设计和开发中，jQuery 遮罩层是一种常用的技术，用于在用户与页面交互时提供视觉焦点或阻止背景内容的操作。本文将详细讲解如何使用 jQuery 来实现遮罩层，并提供一个简单的插件实例。 首先，我们需要理解...
js获取window窗口高度（页面滚动条可滚动高度） - 代码篇
草巾冒小子的博客
04-14 6556
javascript 和 jquery代码： //原生 javascript 代码： let scrollHeight = document.documentElement.scrollTop; // 滚动条的滚动行程 //jquery封装代码： let scrollHeight = $(window).scrollTop(); // 滚动条的滚动行程 应用案例 · （代码+截图） ： v...
js中 scrollHeight、clientHeight、scrollTop的理解
weixin_42371812的博客
09-03 722
滚动触底加载数据，之前我也有写过博客，如果有需要，可以去看我之前写的博客 【https://blog.csdn.net/weixin_42371812/article/details/126450708】前段时间，自己手写了一个滚动触底加载数据的功能。今天有空，所以自己特意去研究了下它的原理。所谓的懒加载，就是在页面上先用一个静态的图片做一个占位符，等滚动那个图片位置的时候，再从后端请求数据，把真实的图片放到页面上。那么，这儿，我也就只说下我的大概思路，说的不好请大家在评论区里指出来。
JS 动态设置页面高度
hexianfan的博客
11-15 2720
JS 获取页面高度
js设置滚动高度，给标签设置属性，添加标签给b站，知乎加个点击事件
liulang68的博客
03-13 1037
let height=document.documentElement.clientHeight; let getBiaoQian=$$('.TopstoryTabs, .Topstory-tabs')[0]; let button = document.createElement("button"); button.innerHTML=`点击` button.id="dianji"; button.setAttribute("position","fixed"); getBiaoQian.append(b
translate实现scroll
jsjdguo的博客
11-23 169
meta: <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no,viewport-fit=cover"> <m...
overflow属性详解
m0_74899726的博客
11-16 1371
overflow属性详解 概述：溢出元素内容区的内容会如何处理 ## 取值 overflow: visible;溢出显示，默认值 overflow: hidden;溢出隐藏 overflow: scroll;溢出显示滚动条，横向和纵向滚动条都显示 overflow: auto;自动，内容溢出时，显示滚动条 overflow-x 只包括水平方向。 overflow-y 只包括垂直方向 ```html body{ /* ov
js 利用overflow属性，设置滚动条，隐藏或设置样式
weixin_42197834的博客
09-20 1万+
页面滚动条设置 overflow属性 想要 在页面哪个部分 或者 哪个盒子添加滚动条， 可以利用 overflow属性，先看看它的基本属性。 浏览器支持情况如上图。 属性值有如下： 想要添加滚动条，必须给盒子添加高度（*） 例如 在x轴上隐藏内容，y轴上显示滚动条 .div { height: 300px overflow-x: hidden; overflo...
vue scrollheight 不准确
09-09
vue的scrollHeight属性是用来获取元素内容的总高度的。然而，有时候我们会发现scrollHeight的值并不准确。 造成scrollHeight不准确的原因可能有以下几种： 1. 渲染延迟：在vue中，当组件渲染完成后，浏览器需要一定的时间去计算元素的高度。如果我们在渲染完成后立即获取scrollHeight的值，可能会得到一个不准确的结果。可以通过监听组件的mounted生命周期来获取准确的scrollHeight。 2. 内容更新：当内容更新时，尤其是动态加载的内容，scrollHeight的值并不会立即更新。这是因为浏览器在更新内容后并不会立即重新计算元素的高度，而是在下一次的渲染帧中才会生效。我们可以使用Vue的$nextTick方法来在下一次DOM更新后获取准确的scrollHeight。 3. 边框和内边距：scrollHeight是包括元素的边框和内边距的高度。如果我们设置了元素的边框或内边距，但没有考虑到这些因素，可能会导致scrollHeight的值不准确。 4. 浮动元素：如果元素中包含浮动元素，浏览器可能无法正确计算scrollHeight，因为浮动元素可能在页面布局上产生变化。 因此，要确保获取准确的scrollHeight值，可以通过监听组件的mounted生命周期，并在$nextTick中获取scrollHeight。同时，需要考虑到边框和内边距的影响，并排除浮动元素可能导致的影响。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值