向Zepto學習關於"偏移"的那些事

時間  2019-11-21
標籤 zepto 學習 關於 偏移 那些 简体版
原文   原文鏈接

前言

這篇文章主要想說一下Zepto中與"偏移"相關的一些事，好久好久之前，咱們常常會使用offset、position、scrollTop、scrollLeft等方式去改變元素的位置，他們之間有什麼區別，是怎麼實現的呢？接下來咱們一點點去扒開他們的面紗。javascript

原文連接css

源碼倉庫html

offsetParent

offset、position兩個api內部的實現都依賴offsetParent方法,咱們先看一下它是怎麼一回事。java

找到第一個定位過的祖先元素，意味着它的css中的position 屬性值爲「relative」, 「absolute」 or 「fixed」 #offsetParentnode

咱們都知道css屬性position用於指定一個元素在文檔中的定位方式，其初始值是static, css3中甚至還增長了sticky等屬性，不過目前貌似瀏覽器幾乎還未支持。css3

看一下這個例子git

htmlgithub

<div class="wrap">
  <div class="child1">
    <div class="child2">
      <div class="child3"></div>
    </div>
  </div>
</div>

複製代碼

cssajax

<style> .wrap{ width: 400px; height: 400px; border: solid 1px red; } .child1{ width: 300px; height: 300px; border: solid 1px green; position: relative; padding: 10px; } .child2{ width: 200px; height: 200px; border: solid 1px bisque; } .child3{ width: 100px; height: 100px; border: solid 1px goldenrod; position: absolute; left: 0; top: 0; } </style>

複製代碼

javascriptjson

console.log($('.child3').offsetParent()) // child1
console.log(document.querySelector('.child3').offsetParent) // child1

複製代碼

既然原生已經有了一個offsetParentmdn offsetParent屬性供咱們使用，爲何Zepto還要本身實現一個呢？其實他們之間仍是有些不一樣的，好比一樣是上面的例子，若是child3的display屬性設置爲了none，原生的offsetParent返回的是null，可是Zepto返回的是包含body元素的Zepto對象。

源碼分析

offsetParent: function () {
  return this.map(function () {
    var parent = this.offsetParent || document.body
    while (parent && !rootNodeRE.test(parent.nodeName) && $(parent).css("position") == "static")
      parent = parent.offsetParent
    return parent
  })
}

複製代碼

實現邏輯仍是比較簡單，經過map方法遍歷當前選中的元素集合，結果是一個數組，每一個項便是元素的最近的定位祖先元素。

首先經過offsetParent原生DOM屬性去獲取定位元素，若是沒有默認是body節點，這裏其實就能解釋前面的child3設置爲display:none,原生返回null，可是Zepto獲得的是body了

var parent = this.offsetParent || document.body
複製代碼

再經過一個while循環若是

  1. parent元素存在
  2. parent元素不是html或者body元素
  3. parent元素的display屬性是static,則再次獲取parent屬性的offsetParent再次循環。

offset

得到當前元素相對於document的位置。返回一個對象含有： top, left, width和height

當給定一個含有left和top屬性對象時，使用這些值來對集合中每個元素進行相對於document的定位。

  1. offset() ⇒ object
  2. offset(coordinates) ⇒ self v1.0+
  3. offset(function(index, oldOffset){ ... }) ⇒

#offset

源碼

offset: function (coordinates) {
  if (coordinates) return this.each(function (index) {
    var $this = $(this),
      coords = funcArg(this, coordinates, index, $this.offset()),
      parentOffset = $this.offsetParent().offset(),
      props = {
        top: coords.top - parentOffset.top,
        left: coords.left - parentOffset.left
      }
    if ($this.css('position') == 'static') props['position'] = 'relative'
    $this.css(props)
  })

  if (!this.length) return null
  if (document.documentElement !== this[0] && !$.contains(document.documentElement, this[0]))
    return { top: 0, left: 0 }
  var obj = this[0].getBoundingClientRect()
  return {
    left: obj.left + window.pageXOffset,
    top: obj.top + window.pageYOffset,
    width: Math.round(obj.width),
    height: Math.round(obj.height)
  }
}

複製代碼

和Zepto中的其餘api相似遵循get one, set all原則，咱們先來看看獲取操做是如何實現的。

if (!this.length) return null
if (document.documentElement !== this[0] && !$.contains(document.documentElement, this[0]))
  return { top: 0, left: 0 }
var obj = this[0].getBoundingClientRect()
return {
  left: obj.left + window.pageXOffset,
  top: obj.top + window.pageYOffset,
  width: Math.round(obj.width),
  height: Math.round(obj.height)
}


複製代碼

  1. !this.length若是當前沒有選中元素，天然就沒有往下走的必要了，直接return掉

  2. 當前選中的集合中不是html元素，而且也不是html節點子元素。直接返回{ top: 0, left: 0 }

  3. 接下來的邏輯纔是重點。首先經過getBoundingClientRect獲取元素的大小及其相對於視口的位置，再經過pageXOffset、pageYOffset獲取文檔在水平和垂直方向已滾動的像素值，相加既獲得咱們最後想要的值。

再看設置操做如何實現以前，先看下面這張圖，或許會有助於理解

offset 

if (coordinates) return this.each(function(index) {
  var $this = $(this),
      coords = funcArg(this, coordinates, index, $this.offset()),
      parentOffset = $this.offsetParent().offset(),
      props = {
        top: coords.top - parentOffset.top,
        left: coords.left - parentOffset.left
      }

  if ($this.css('position') == 'static') props['position'] = 'relative'
  $this.css(props)
})

複製代碼

仍是那個熟悉的模式，熟悉的套路，循環遍歷當前元素集合，方便挨個設置，經過funcArg函數包裝一下，使得入參既能夠是函數，也能夠是其餘形式。

經過上面那張圖，咱們應該能夠很清晰的看出，若是要將子元素設置到傳入的coords.left的位置，那其實

  1. 父元素（假設父元素是定位元素）相對文檔的左邊距(parentOffset.left)
  2. 子元素相對父元素的左邊距(left)
  3. 相加獲得的就是入參coords.left

那再作個減法，就獲得咱們最終經過css方法須要設置的left和top值啦。

須要注意的是若是元素的定位屬性是static,則會將其改成relative定位，相對於其正常文檔流來計算。

position

獲取對象集合中第一個元素相對於其offsetParent的位置。

position: function() {
  if (!this.length) return

  var elem = this[0],
    offsetParent = this.offsetParent(),
    offset = this.offset(),
    parentOffset = rootNodeRE.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset()
  offset.top -= parseFloat($(elem).css('margin-top')) || 0
  offset.left -= parseFloat($(elem).css('margin-left')) || 0
  parentOffset.top += parseFloat($(offsetParent[0]).css('border-top-width')) || 0
  parentOffset.left += parseFloat($(offsetParent[0]).css('border-left-width')) || 0
  return {
    top: offset.top - parentOffset.top,
    left: offset.left - parentOffset.left
  }
}


複製代碼

先看一個例子

html

<div class="parent">
  <div class="child"></div>
</div>

複製代碼

css

.parent{
  width: 400px;
  height: 400px;
  border: solid 1px red;
  padding: 10px;
  margin: 10px;
  position: relative;
}

.child{
  width: 200px;
  height: 200px;
  border: solid 1px green;
  padding: 20px;
  margin: 20px;
}


複製代碼
console.log($('.child').position()) // {top: 10, left: 10}

複製代碼

下面分別是父子元素的盒模型以及標註了須要獲取的top的值

接下來咱們來看它怎麼實現的吧,come on!!!

  1. 第一步
var offsetParent = this.offsetParent(),
// Get correct offsets
// 獲取當前元素相對於document的位置
offset = this.offset(),
// 獲取第一個定位祖先元素相對於document的位置，若是是根元素（html或者body）則爲0， 0
parentOffset = rootNodeRE.test(offsetParent[0].nodeName) ? { top: 0, left: 0 } : offsetParent.offset()


複製代碼
  1. 第二步
// 相對於第一個定位祖先元素的位置關係不該該包括margin的舉例，因此減去
offset.top -= parseFloat($(elem).css('margin-top')) || 0
offset.left -= parseFloat($(elem).css('margin-left')) || 0

複製代碼
  1. 第三步
// 祖先定位元素加上border的寬度
parentOffset.top += parseFloat($(offsetParent[0]).css('border-top-width')) || 0
parentOffset.left += parseFloat($(offsetParent[0]).css('border-left-width')) || 0


複製代碼

第四步

// 相減即結果
return {
  top: offset.top - parentOffset.top,
  left: offset.left - parentOffset.left
}


複製代碼

總體思路仍是用當前元素相對於文檔的位置減去第一個定位祖先元素相對於文檔的位置，但有兩點須要注意的是position這個api要計算出來的值，不該該包括父元素的border長度以及子元素的margin空間長度。因此纔會有第二和第三步。

scrollLeft

獲取或設置頁面上的滾動元素或者整個窗口向右滾動的滾動距離。

scrollLeft: function (value) {
  if (!this.length) return
  var hasScrollLeft = 'scrollLeft' in this[0]
  if (value === undefined) return hasScrollLeft ? this[0].scrollLeft : this[0].pageXOffset
  return this.each(hasScrollLeft ?
    function () { this.scrollLeft = value } :
    function () { this.scrollTo(value, this.scrollY) })
}

複製代碼

首先判斷當前選中的元素是否支持scrollLeft特性。

若是value沒有傳進來，又支持hasScrollLeft特性，就返回第一個元素的hasScrollLeft值,不支持的話返回第一個元素的pageXOffset值。

pageXOffset是scrollX的別名，而其表明的含義是返回文檔/頁面水平方向滾動的像素值

傳進來了value就是設置操做了，支持scrollLeft屬性，就直接設置其值便可，反之須要用到scrollTo，固然設置水平方向的時候，垂直方向仍是要和以前的保持一致，因此傳入了scrollY做爲

scrollTop

獲取或設置頁面上的滾動元素或者整個窗口向下滾動的距離。

scrollTop: function(value) {
  if (!this.length) return
  var hasScrollTop = 'scrollTop' in this[0]
  if (value === undefined) return hasScrollTop ? this[0].scrollTop : this[0].pageYOffset
  return this.each(hasScrollTop ?
    function() { this.scrollTop = value } :
    function() { this.scrollTo(this.scrollX, value) })
},

複製代碼

能夠看出基本原理和模式與scrollLeft一致，就再也不一一解析。

結尾

以上就是Zepto中與"偏移"相關的幾個api的解析，歡迎指出其中的問題和有錯誤的地方。

參考

讀Zepto源碼之屬性操做

scrollTo

scrollLeft

pageXOffset

...

文章記錄

ie模塊

  1. Zepto源碼分析之ie模塊(2017-11-03)

data模塊

  1. Zepto中數據緩存原理與實現(2017-10-03)

form模塊

  1. zepto源碼分析之form模塊(2017-10-01)

zepto模塊

  1. 這些Zepto中實用的方法集(2017-08-26)
  2. Zepto核心模塊之工具方法拾遺 (2017-08-30)
  3. 看zepto如何實現增刪改查DOM (2017-10-2)
  4. Zepto這樣操做元素屬性(2017-11-13)
  5. 向Zepto學習關於"偏移"的那些事(2017-12-10)

event模塊

  1. mouseenter與mouseover爲什麼這般糾纏不清？(2017-06-05)
  2. 向zepto.js學習如何手動觸發DOM事件(2017-06-07)
  3. 誰說你只是"會用"jQuery?(2017-06-08)

ajax模塊

  1. 原來你是這樣的jsonp(原理與具體實現細節)(2017-06-11)
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程