原生js和jquery获取元素坐标、尺寸及监听页面滚动

offsetTop、offsetLeft、offsetWidth、offsetHeight

offsetTop --- 当前对象到其上级层顶部的间隔.

offsetLeft --- 当前对象到其上级层左边的间隔.

offsetWidth --- 当前对象的宽度

offsetHeight --- 当前对象的高度

offsetParent --- 当前对象的上级层对象.

如果对象是包括在一个DIV中时,此DIV不会被当做是此对象的上级层,(即对象的上级层会跳过DIV对象)上级层是Table时则不会有问题.

利用这个属性，可以得到当前对象在不同大小的页面中的绝对位置．

// 获取元素的纵坐标(相对于窗口)
function getTop(e) {
  var offset = e.offsetTop;
  if (e.offsetParent != null) offset += getTop(e.offsetParent);
  return offset;
}

---

scrollLeft、scrollTop

scrollLeft

对象的最左边到对象在当前窗口显示的范围内的左边的距离．

即是在出现了横向滚动条的情况下，滚动条拉动的距离．

scrollTop

对象的最顶部到对象在当前窗口显示的范围内的顶边的距离．

即是在出现了纵向滚动条的情况下，滚动条拉动的距离．

---

javascript中制作滚动代码的常用属性

• 网页可见区域宽： document.body.clientWidth;

• 网页可见区域高： document.body.clientHeight;

• 网页可见区域宽： document.body.offsetWidth (包括边线的宽);

• 网页可见区域高： document.body.offsetHeight (包括边线的宽);

• 网页正文全文宽： document.body.scrollWidth;

• 网页正文全文高： document.body.scrollHeight;

• 网页被卷去的高： document.body.scrollTop;

• 网页被卷去的左： document.body.scrollLeft;

• 网页正文部分上： window.screenTop;

• 网页正文部分左： window.screenLeft;

• 屏幕分辨率的高： window.screen.height;

• 屏幕分辨率的宽： window.screen.width;

• 屏幕可用工作区高度： window.screen.availHeight;

---

原生js 平滑滚动到页面的某个位置

window.scrollTo(options)

• top 是文档中的纵轴坐标

• left 是文档中的横轴坐标

• behavior 类型String,表示滚动行为,支持参数 smooth(平滑滚动),instant(瞬间滚动),默认值auto,实测效果等同于instant

window.scrollTo({ 
    top: 1000, 
    behavior: "smooth" 
});

---

滚动当前元素，进入浏览器的可见区域(scrollIntoView方法)

element.scrollIntoView(scrollIntoViewOptions); // Object型参数

• behavior 可选

  定义动画过渡效果， "auto"或 "smooth" 之一。默认为 "auto"。

• block 可选

  定义垂直方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "start"。

• inline 可选

  定义水平方向的对齐， "start", "center", "end", 或 "nearest"之一。默认为 "nearest"。

element.scrollIntoView({behavior: "instant", block: "end", inline: "nearest"});

Element.scrollIntoView()

---

监听页面滚动(JS、jQuery)

原生js通过window.onscroll监听

window.onscroll = function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
}

Jquery通过$(window).scroll()监听

$(window).scroll(function() {
  //为了保证兼容性，这里取两个值，哪个有值取哪一个
  //scrollTop就是触发滚轮事件时滚轮的高度
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  console.log("滚动距离" + scrollTop);
})

---

jQuery-获取元素尺寸和坐标

坐标

获取页面某一元素的绝对X,Y坐标，可以用offset()

var X = $("#id").offset().top;
var Y = $("#id").offset().left;

获取相对(父元素)位置

var X = $("#id").position().top;
var Y = $("#id").position().left;

尺寸

width() 和 height() 方法

• width() 方法设置或返回元素的宽度(不包括内边距、边框或外边距)。

• height() 方法设置或返回元素的高度(不包括内边距、边框或外边距)。

innerWidth() 和 innerHeight() 方法

• innerWidth() 方法返回元素的宽度(包括内边距)。

• innerHeight() 方法返回元素的高度(包括内边距)。

outerWidth() 和 outerHeight() 方法

• outerWidth() 方法返回元素的宽度(包括内边距和边框)。

• outerHeight() 方法返回元素的高度(包括内边距和边框)。

• outerWidth(true) 方法返回元素的宽度(包括内边距、边框和外边距)。

• outerHeight(true) 方法返回元素的高度(包括内边距、边框和外边距)。

---

获取鼠标当前坐标(JS、jQuery)

JS获取当前鼠标坐标方法

• clientX: 事件属性是鼠标位置相对于用户窗口客户区中的水平偏移量。

• clientY: 事件属性是鼠标位置相对于用户窗口客户区中的垂直偏移量。

// 获取当前鼠标所在的位置
function getClientCoordinates(e){
    var oEvent=e||event;
    x = oEvent.clientX;
    y = oEvent.clientY;
    return {x,y}
}

jQuery获取当前鼠标坐标方法

• e.pageX : 相对于用户页面区域的水平偏移量

• e.pageY : 相对于用户页面区域的垂直偏移量

function getClientCoordinates(e){
    x = e.pageX;
    y = e.pageY;
    return {x,y}
}