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"});
监听页面滚动(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}
}