jQuery API之offset、position、scrollLeft的使用

offset

• 參數：
  • object：offset對象：包含left, top屬性
• 做用：
  1. 獲取jQ對象距離文檔的left, top值
  2. 設置jQ對象距離文檔的left, top值
• 說明：
  1. 該函數的參照對象永遠是文檔對象(document)
  2. 原生的offset系列則以距離最近且有定位的父元素爲參照對象，沒有才以文檔對象爲參照對象
• code：

.wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: orange;
    left: 100px;
    top: 100px;
  }

  .wrapper .demo {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    left: 50px;
    top: 50px;
  }
複製代碼

<div class="wrapper">
    <div class="demo"></div>
  </div>
複製代碼

// 獲取offset對象
    console.log($('.wrapper > .demo').offset()); // 執行結果：輸出{top: 150, left: 150}

    // 設置offset
    $('.wrapper > .demo').offset({top: 0, left: 0});
複製代碼

position

• 參數：
  • object：offset對象：包含left, top屬性
• 做用：
  1. 獲取jQ對象距離最近且有定位的父元素的left, top值
• 說明：
  1. 該函數的取值規則與原生的offset系列一致
  2. 該函數不提供設置功能
• code：

.wrapper {
    position: absolute;
    width: 200px;
    height: 200px;
    background-color: orange;
    left: 100px;
    top: 100px;
 }

.wrapper .demo {
    position: absolute;
    width: 50px;
    height: 50px;
    background-color: red;
    left: 50px;
    top: 50px;
}
複製代碼

<div class="wrapper">
    <div class="demo"></div>
</div>
複製代碼

// 獲取offset對象
console.log($('.wrapper > .demo').position()); // 執行結果：輸出{top: 50, left: 50}

// (無效)
$('.wrapper > .demo').position({top: 0, left: 0});
複製代碼

scrollLeft

• 參數：
  • number: X軸捲曲距離
• 做用：
  1. 獲取jQ對象X軸捲曲距離
  2. 設置jQ對象X軸捲曲距離
• code：

body {
    width: 3000px;
}
複製代碼

// 獲取window的X軸捲曲距離
console.log($(window).scrollLeft());
// 設置window的X軸捲曲距離
$(window).scrollLeft(1000);
複製代碼