JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解

JS 中 scrollWidth、scrollHeight、scrollLeft 、scrollTop 详解1.总述在JS中scrollWidth、scrollHeight、scrollLeft 、scrollTop属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。以上的4个属性是成对出现的,因此下面介绍中也成对的介绍,在实例中为了减少代码量,我直接用的id,实际开发中不推荐。2.scrollWidth和scrollHeight2.1概念element…

大家好,又见面了,我是你们的朋友全栈君。

1. 总述

在JS 中scrollWidth、scrollHeight、scrollLeft 、scrollTop 属性在做一些复杂的交互效果中是非常常用的,因此在本博文中详细的介绍并给出实例。
以上的4个属性是成对出现的,因此下面介绍中也成对的介绍,在实例中为了减少代码量,我直接用的id,实际开发中不推荐。

2. scrollWidth和scrollHeight

2.1 概念

  1. element.scrollWidth:返回元素的整体宽度,包括由于溢出而无法展示在网页的不可见部分。
  2. element.scrollHeight :返回元素的整体高度,包括由于溢出而无法展示在网页的不可见部分。

2.2 实例

在页面中,溢出说得更加通俗一些就是有没有滚动条出现,出现了,说明子元素有一部分被父元素遮挡了,就溢出了,下面给出两个实例,一个没有溢出(没有滚动条),一个溢出了,分别观察他们的scrollWidth和scrollHeight。

2.2.1 未溢出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 100px; height: 120px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            this is children
        </div>
    </div>
    <script> console.log(children_div.scrollWidth, children_div.scrollHeight) </script>
</body>
</html>

打印结果为: 100 120 也就是我给出的children的大小。
在这里插入图片描述

2.2.2 溢出
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 300px; height: 320px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam eveniet ex.
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Minus voluptate error fugiat dignissimos doloremque veritatis reiciendis illum hic repudiandae nobis a tempore quae accusamus, ab architecto suscipit assumenda dolorem explicabo.
        </div>
    </div>
    <script> console.log(children_div.scrollWidth, children_div.scrollHeight) </script>
</body>
</html>

打印结果为: 300 320 仍然是我给出的children的大小。
在这里插入图片描述

3. scrollLeft 和scrollTop

3.1 概念

  1. element.scrollLeft :返回元素左边缘与视图之间的距离,这里的视图指的是元素的内容(包括子元素以及内容)。
  2. element.scrollTop :返回元素上边缘与视图之间的距离。

我们在页面中经常会用到如图所示的带滚动条的框,我们的QQ消息,微信消息也是这样的呀!
在这里插入图片描述我们需要滑动滚动条来查看完整的视图,这个时候scrollLeft 和scrollTop就出现了,其实实际项目中我们是需要用到client和scroll这两大属性来自动的滑动滚动条,比如来新消息的时候,滚动条自动往下滑动到底部以便查看新消息。这是着重讲scroll,理解清楚了再进行下一步。

scrollLeft的概念是返回元素左边缘与视图之间的距离,我们一步一步的理解,首先,如上图所示,当我们没有滑动水平滚动条时,元素与它的内容默认是左上角顶点重合的,所以他们之间是没有距离的,此刻的
scrollLeft 为 0。
在这里插入图片描述
当我们拉动水平滚动条时,元素与视图就不再是左上角顶点重合了,水平之间是存在距离的(按左上角顶点重合计算),可以看到现在的scrollLef有了数值,因为没有移动垂直滚动条,因此垂直方向仍然是没有距离的。
在这里插入图片描述在这里插入图片描述
当我将水平,垂直滚动条都拉到底部时,scrollLeft 和 scrollTop 都 分别为116.8 和156.8 ,我设置的元素宽高分别为:200 180 ,视图(子元素)宽高分别为:300 320 ,如果正常计算的话最大距离应该为 : 300-200= 100 以及 320-180 = 140,但结果都增加了16左右,那么因为浏览器计算了滚动条的宽高,具体的代码我会在下面贴出,实际的代码会让你更加清楚的理解这一过程,你可以直接复制然后再浏览器中尝试。
在这里插入图片描述
在这里插入图片描述

3.2 实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>test</title>
    <style> #parent_div{ 
     width: 200px; height: 180px; background: skyblue; overflow: auto; } #children_div{ 
     width: 300px; height: 320px; background:green; color: white; } </style>
</head>
<body>
    <div id="parent_div">
        <div id="children_div">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab praesentium consectetur, eligendi odit labore blanditiis repudiandae quam quia, atque eius ipsam suscipit quaerat in dicta. Soluta quasi quam 
            Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        </div>
    </div>
    <script> parent_div.onscroll = function(){ 
     console.log(parent_div.scrollLeft) console.log(parent_div.scrollTop) } </script>
</body>
</html>

希望能够帮助到大家,有什么问题可以 直接评论即可,如果不够详细的话也可以说,我会及时回复的。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/163752.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • awstats 配置「建议收藏」

    awstats 配置「建议收藏」awstats一、首先修改httpd.conf  httpd-vhost.conf把log模式由common改成combinedvi/usr/local/apache2/conf/httpd.confvi/usr/local/apache2/conf/extra/httpd-vhost.conf/usr/local/apache2/bin/apachectlrestart二、安装Geo-…

  • 什么品种的猫最受欢迎?Python爬取猫咪网站交易数据[通俗易懂]

    什么品种的猫最受欢迎?Python爬取猫咪网站交易数据[通俗易懂]本篇文章是关于某化妆品企业的销售分析。从分析思路开始带大家一步步地用python进行分析,找出问题,并提出解决方案的整个流程。以下文章来源于修炼Python作者:叶庭云Python爬虫、数据分析、网站开发等案例教程视频免费在线观看https://space.bilibili.com/523606542一、前言看到可爱的猫咪表情包,总是会忍不住收藏,晒部分图如下:认识的一些朋友也养了猫,比如橘猫、英短、加菲猫之类的,看他们发朋友圈撸猫,老羡慕了,猫咪真的太可爱啦。发.

  • java程序员简历范文大全_程序员简历

    java程序员简历范文大全_程序员简历求职意向 期望工作地区: 上海 期望月薪: 15000元/月 目前状况: 我目前处于离职状态,可立即上岗 期望工作性质: …

    2022年10月26日
  • af-s af-f_read fpdma queued

    af-s af-f_read fpdma queued1.PDAF驱动功能验证1.1pdaflog设置log设置,打开AF(8),State(2),Sensor(2)的logCT30P:/#cat/vendor/etc/camera/camxoverridesettings.txtoverrideLogLevels=0x3FlogWarningMask=0x08000202logInfoMask=0x08000202logVerboseMask=0x08000202enable3ADebugData=TRUEdumpSens

  • Caused by: java.lang.ClassNotFoundException: org.apache.commons.lang3.StringUtils「建议收藏」

    Caused by: java.lang.ClassNotFoundException: org.apache.commons.lang3.StringUtils

  • 毕设系列之 — 教程:单片机控制步进电机

    毕设系列之 — 教程:单片机控制步进电机文章目录1简介2步进电机介绍3A4988驱动介绍4电机启动代码5最后1简介Hi,大家好,这里是丹成学长,今天向大家介绍如何使用单片机控制步进电机大家可用于课程设计或毕业设计技术解答毕设帮助:<Q>7468760412步进电机介绍步进电机是一种将电脉冲转化为角位移的执行机构。通俗一点讲:当步进驱动器接收到一个脉冲信号,它就驱动步进电机按设定的方向转动一个固定的角度(即步进角),多用于雕刻机、3D打印机等需要精确控制的设备。本篇使用ULN2003驱动五线四相减速

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号