龙喵专栏 /前端 /内容

对JS中offset与scroll详解

网站前端开发每次在做关于滚动或者定位之类的交互时,或多或少都会用到offset、scroll之类的元素属性值来计算距离,但是每次都是现用现百度,从来没有真正系统地弄明白其中的原理及用法。

offset相关

以offset开头的属性有5个,分别是:offsetParentoffsetWidthoffsetHeightoffsetTop以及offsetLeft,下面我们来一一了解它们

1.offsetParent

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>offsetParent</title>
  <style>

  </style>
</head>
<body>
<!--1.除了浏览器默认的,我们没有设置任何样式-->
<div id="outer">
  <div id="inner">
    我是div
  </div>
</div>
<script>
  // 2.我们看看id="inner"元素的offsetParent是哪一个
  var inner = document.getElementById('inner')
  console.log(inner.offsetParent)
</script>
</body>
</html>

offsetParent

从控制台我们得到inner的offsetParent是body元素,那么就有问题了“inner的父元素是outer啊,但为什么offsetParent不是它?”,那是因为元素的offsetParent是距离它最近的一个具有定位的父辈元素,这里“具有定位”4个字很重要,如果你怀疑这个结论,那我们就再往下看

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>offsetParent</title>
  <style>
    /*这里我们给outer一个相对定位*/
    #outer {
      position: relative;
    }
  </style>
</head>
<body>
<!--1.除了浏览器默认的,我们没有设置任何样式-->
<div id="outer">
  <div id="inner">
    我是div
  </div>
</div>
<script>
  // 2.我们看看id="inner"元素的offsetParent是哪一个
  var inner = document.getElementById('inner')
  console.log(inner.offsetParent)
</script>
</body>
</html>

看出不同了吗,outer有了相对定位,结果呢?

offsetParent

很明显,inner在一层层向上查找时,找到outer的时候,发现outer有定位(inner不管outer具体是什么定位,只要有定位就好,除了position: static),那么关于element.offsetParent,我们可以有以下结论“元素的offsetParent是距离该元素最近的且具有定位的父辈元素,如果没有符合条件的父辈元素,那么body就是它的offsetParent”

2.offsetWidth与offsetHeight

以offsetWidth为例,offsetWidth=width+padding*2+border*2+[横向滚动条width],这里滚动条的高度是否计算在offsetWidth内,各浏览器在具体实现上存在差异,例如chrome就没有将它计算在内;说到这,何为offsetWidth与offsetHeight?不着急,看看下面的代码示例

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>offsetWidth</title>
  <style>
    #outer {
      position: relative;
      width: 360px;
      height: 300px;
      padding: 40px;

      overflow: scroll;
      border: 20px solid #ff552e;
    }
  </style>
</head>
<body>
<div id="outer">
  我是outer
</div>
<script>
  var outer = document.getElementById('outer')

  console.log('offsetWidth:' + outer.offsetWidth)
</script>
</body>
</html>

offsetWidth

可以注意到,我们设置outer的width是360px,但在页面中,outer的实际宽度是480px,这是因为offsetWidth是元素的布局宽度,而非样式宽度,即当元素真正渲染到页面后的宽度,我们在屏幕上看到的这个宽度就是width+padding*2+border*2后的结果值,所以,关于offsetWidth的结论是:“offsetWidth是元素渲染到页面后的实际宽度尺寸,同理,offsetHeight就是元素渲染到页面后的实际高度尺寸”

3.offsetTop与offsetLeft

关于这两个属性,我想聪明的小伙伴已经猜到了,它们就是“元素与它的offsetParent的上边界与左边界的距离”

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>offsetTop&offsetLeft</title>
  <style>
    #outer {
      position: relative;
      width: 360px;
      height: 300px;
      /*使用padding让outer与inner产生距离*/
      padding-top: 20px;
      padding-left: 10px;

      border: 1px solid #666;
    }
    #inner {
      height: 100px;
      border: 1px solid #ff552e;
    }
  </style>
</head>
<body>
<div id="outer">
  <div id="inner">
    我是inner
  </div>
</div>
<script>
  var inner = document.getElementById('inner')

  console.log('offsetTop:' + inner.offsetTop)
  console.log('offsetLeft:' + inner.offsetLeft)
</script>
</body>
</html>

offsetTop&offsetLeft

那么我们再扩展一下,如果outer不具有定位呢,offsetTop与offsetLeft会是什么?当然是inner距离body的上边界与左边界的值了

scroll相关

1.scrollWidth

一个元素要想在scrollWidth有值,那么它要满足至少以下两点:

1.元素要有宽度,并且宽度是生效的(如果你给一个行内元素设置width,宽度是不生效的)

2.元素的内部要有一个子元素,或者文本;子元素的width要大于该元素;如果是文本,那么文本在不换行的情况下要超出该元素的水平边界。

总结一句就是:元素必须是可滚动的

看下面示例:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>scrollWidth</title>
  <style>
    #outer {
      position: relative;
      /*注意此处的值*/
      width: 360px;
      height: 300px;

      overflow: scroll;
      border: 1px solid #666;
    }
    #inner {
      /*注意此处的值*/
      width: 600px;
      height: 100px;
      
      /*padding: 10px;*/
      border: 1px solid #ff552e;
    }
  </style>
</head>
<body>
<div id="outer">
  <div id="inner">
    我是inner
  </div>
</div>
<script>
  var outer = document.getElementById('outer')

  console.log('scrollWidth:' + outer.scrollWidth)
</script>
</body>
</html>

scrollWidth

细心的童鞋注意到outer.scrollWidth不等于outer的宽度,而且inner的宽度,更准确的说是inner.offsetWidth,不信你可以把inner的padding注释打开看看

2.scrollHeight

同上,原理相同

3.scrollTop&scrollLeft

scrollTop与scrollLeft就是当可滚动的元素发生滚动时,里面的子元素分别从上边界和左边界出去了多少距离

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>scrollTop&scrollLeft</title>
  <style>
    #outer {
      position: relative;
      width: 360px;
      height: 300px;

      overflow: scroll;
      border: 1px solid #666;
    }
    #inner {
      /*inner的宽高都大于outer,所以outer水平垂直滚动条都会出现*/
      width: 600px;
      height: 600px;

      padding: 10px;
      border: 1px solid #ff552e;
    }
  </style>
</head>
<body>
<div id="outer">
  <div id="inner">
    我是inner
  </div>
</div>
<script>
  var outer = document.getElementById('outer')

  // 未滚动
  console.log('未滚动')
  console.log('scrollTop:' + outer.scrollTop)
  console.log('scrollLeft:' + outer.scrollLeft)

  // 手动滚动,然后再次输出scrollTop
  setTimeout(function () {
    console.log('已滚动')
    console.log('scrollTop:' + outer.scrollTop)
    console.log('scrollLeft:' + outer.scrollLeft)
  }, 2000)
</script>
</body>
</html>

scrollTop&scrollLeft

1.部分文章来自网络,如有侵犯权益,请联络博主,资源失效与内容勘误留言说明.

2.如若转载,请注明出处:http://ailongmiao.com/read/444.html

[ web前端导航 ]:http://ailongmiao.com/web/

评论

继续阅读

无障碍 Web 开发

无障碍 Web 开发

Web前端 2019-06-04 3

良好的 Web 可访问性,就是把你的网站建设成让尽可能多的人都觉得好用,可以让每一个人受益。语义化 HTML 也是确保 Web 良好访问性的

禁止用户打开HTML页面调试

Web前端 2019-05-18 3

有时为了防止别人调试我们的HTML页面,盗取代码等行为,介绍一些能够阻止用户在浏览器中打开调试窗口的方法,这些方法只能一定程度的提

细数CSS伪元素及其用法

Web前端 2019-03-29 10

CSS中有两个很常见的概念,伪类和伪元素。伪类用于在页面中的元素处于某个状态时,为其添加指定的样式。伪元素会创建一个抽象的伪元

  选择打赏方式

打赏

打赏