html-dom (scroll offset client)

WEB前端 waitig 534℃ 百度已收录 0评论

三大家族

scroll offset client

offset家族

offset系列用于用于获取元素自身的大小和位置,在网页特效中有广泛应用

offset系列主要有:offsetHeight、offsetWidth、offsetParent、offsetLeft、offsetTop

offsetHeight与offsetWidth

  1. 获取的是元素真实的高度和宽度
  2. 获取到的是数值类型,方便计算
  3. offsetHeight与offsetWidth是只读属性,不能设置。

style.height与style.width

  1. 只能获取行内样式
  2. 获取到的是字符串类型,需要转换

offsetHeight与offsetWidth的构成

​ offsetHeight = height + paddnig + border

​ offsetWidth = width + padding + border

offset

scroll家族

scroll家族用来获取盒子内容的大小和位置

scroll家族有:scrollWidth、scrollHeight、scrollLeft、scrollTop

  1. scrollWidth与scrollHeight是盒子内容的真实的宽度和高度。与和盒子大小无关,仅仅与盒子的内容有关系。
  2. scrollTop是盒子内容被滚动条卷去的头部的高度。scrollLeft是盒子内容被滚动条卷去的左侧的宽度。

    scroll

onscroll事件,对于有滚动条的盒子,可以使用onscroll注册滚动事件,每滚动一像素,就会触发该事件。

var box = doucment.getElementById(“box”);
box.onscroll = function(){
    //事件处理程序
}

获取页面被卷去的高度和宽度

通常来说,scroll家族用的最多的地方就是用来获取页面被卷去的宽度和高度,非常的常用

页面被卷去的高度和宽度的兼容性封装

function scroll() {
    return {
        top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0,
        left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
    };
}

//如何使用
console.log(scroll().top);//获取页面被卷去的头部的距离
console.log(scroll().left);//获取页面被卷去的左侧的距离

client家族

client家族用于获取盒子可视区的大小

client家族有clientWidth、clientHeight、clientLeft、clientTop

如果内容没有超出盒子范围:clientWidth与scrollWidth相同

clientTopclientLeft 完全没有用,他们就是borderTop与borderLeft

但是:如果有滚动条,还会包含滚动条的宽度,但是见过滚动条在上边或者左边的?

onresize事件:onresize事件会在窗口被调整大小的时候发生。

window.onresize = function(){
    //事件处理程序
}

client系列一般用来获取页面的可视区宽高

function client() {
    return {
        width: window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth || 0,
        height: window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight || 0
    };
}

本文由【waitig】发表在等英博客
本文固定链接:html-dom (scroll offset client)
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)