вы бы действительно использовали getBoundingClientRect

внешний интерфейс CSS

Вы бы действительно использовали getBoundingClientRect?

Цзо Пэнфэй 20.09.2017

В этой статье рассказывается, что такое getBoundingClientRect, как добиться совместимости ширины и высоты, и, наконец, представлены два сценария использования: получение позиции элементов страницы и оценка того, находится ли элемент в видимой области.

1. что такое getBoundingClientRect

getBoundingClientRectИспользуется для получения положения левого, верхнего, правого и нижнего элемента на странице относительно окна браузера.getBoundingClientRectдаDOMРасстояние элемента от видимого диапазона браузера (исключая свернутую часть документа).

  • Функция возвращаетObjectобъект, который имеет 6 свойств:top,lef,right,bottom,width,height;

  • Верх и левый здесь очень похожи на таковые в css, ширина и высота — это ширина и высота самого элемента;

  • Но понимание правого, нижнего и css немного отличается. Справа относится к расстоянию от правого края элемента до самого левого края окна, а снизу относится к расстоянию от нижнего края элемента до самого верхнего края окна.

图1

// 获取元素
var box=document.getElementById('box');

// 元素上边距离页面上边的距离
alert(box.getBoundingClientRect().top);

// 元素右边距离页面左边的距离
alert(box.getBoundingClientRect().right); 

// 元素下边距离页面上边的距离
alert(box.getBoundingClientRect().bottom);

// 元素左边距离页面左边的距离
alert(box.getBoundingClientRect().left);
скопировать код

图2

2. Совместимость

getBoundingClientRect() изначально был частным свойством IE, а теперь является стандартом W3C. Так что вам не нужно беспокоиться о проблемах совместимости браузера, но отличия все же есть: IE возвращает только верхнее, левое, правое, нижнее четыре значения, но вы можете получить значения ширины и высоты следующими методами

var ro = object.getBoundingClientRect();
var Width = ro.right - ro.left;
var Height = ro.bottom - ro.top;

//兼容所有浏览器写法：

var ro = object.getBoundingClientRect();
var Top = ro.top;
var Bottom = ro.bottom;
var Left = ro.left;
var Right = ro.right;
var Width = ro.width||Right - Left;
var Height = ro.height||Bottom - Top;

скопировать код

3. Используйте getBoundingClientRect(), чтобы получить позицию элемента страницы.

До этого в большинстве случаев для получения позиции элемента страницы использовался следующий код:

var _x = 0, _y = 0;
do{
	_x += el.offsetLeft;
	_y += el.offsetTop;
}
while(el=el.offsetParent);

return {x:_x,y:_y}

скопировать код

Здесь возникает проблема «offsetParent», поэтому необходимо написать много совместимого кода.

имеютgetBoundingClientRectЭтот метод намного проще получить позицию элемента страницы,

var X= this.getBoundingClientRect().left+document.documentElement.scrollLeft;

var Y =this.getBoundingClientRect().top+document.documentElement.scrollTop;

скопировать код

4. Определить, находится ли элемент в видимой области

Предыдущий метод заключается в оценке того, виден ли элемент при различных смещениях.

me.on('onload', function () {
    var hasDot = false;
    function scrollHandler() {
        var elOffsetTop = me.$el.offset().top;
        var elHeight = me.$el.height();
        var wHeight = $(window).height();
        var scrollTop = $(window).scrollTop();
        if (scrollTop + wHeight >= elOffsetTop + elHeight) {
            if (!hasDot) {
                me.fire('moduleShow');
            }
            hasDot = true;
        }
    }
    // 知识图谱推荐模块展现PV/UV(模块底部露出页面视为被展现)
    $(window).on('scroll.kgrecommend', scrollHandler);
    // 先执行一遍
    scrollHandler();
});
скопировать код

getBoundingClientRect — получить информацию о положении относительно видимой области, удобнее использовать это свойство для оценки:

function isElementInViewport (el) {
    var rect = el.getBoundingClientRect();
    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}
скопировать код
Категории