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);
复制代码