How does vue determine whether an element is in the visible area?

Three methods: 1. Use offsetTop and scrollTop to obtain the position of the element, and determine whether it is less than or equal to viewPortHeight (view port distance). 2. Use getBoundingClientRect() to judge, the syntax is "element object.getBoundingClientRect()". 3. Use IntersectionObserver to judge, just check whether the specified element and the visible area overlap.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

What is the visible area

The visible area is the area visible to the naked eye on the device we use to browse the web, as shown below

In daily development, we often need to determine whether the target element is within the view window or the distance from the view window is less than a value (such as 100 px), so as to implement some common functions, such as:

• Lazy loading of images
• Infinite scrolling of lists
• Calculate the exposure of advertising elements
• Preloading of clickable links

Three ways to determine whether an element is in the visible area

To determine whether an element is in the visible area, we commonly use three methods:

• offsetTop, scrollTop

• getBoundingClientRect

• Intersection Observer

Method 1 , offsetTop, scrollTop

##offsetTop, the pixel distance between the top outer border of the element and the top inner border of the containing element, othersoffset The properties are shown in the figure below:

clientWidth, clientHeight:

• clientWidth: The width of the element content area plus the left and right padding width, that is, clientWidth = content padding
• clientHeight: The height of the element content area plus The height of the top and bottom padding, that is, clientHeight = content padding

client elements do not include margins

scroll series are as follows:

• scrollWidth and scrollHeight are mainly used to determine the actual content of the element. The size

• scrollLeft and scrollTop properties can both determine the current scrolling state of the element and set the scroll position of the element

• Vertical scroll
  • scrollTop > 0
  Horizontal scroll
  • scrollLeft > 0
• Set the element's

  scrollLeft and scrollTop to 0 to reset the element's scroll position

Note

The above attributes are read-only, and each access must be restarted

el.offsetTop - document.documentElement.scrollTop <= viewPortHeight

function isInViewPortOfOne (el) {
    // viewPortHeight 兼容所有浏览器写法
    const viewPortHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight 
    const offsetTop = el.offsetTop
    const scrollTop = document.documentElement.scrollTop
    const top = offsetTop - scrollTop
    return top <= viewPortHeight
}

Method 2: getBoundingClientRect

DOMRect object with left, top, right, bottom, The x, y, width, and height properties. [Learning video sharing: vue video tutorial, web front-end video]

const target = document.querySelector('.target');
const clientRect = target.getBoundingClientRect();
console.log(clientRect);

// {
//   bottom: 556.21875,
//   height: 393.59375,
//   left: 333,
//   right: 1017,
//   top: 162.625,
//   width: 684
// }

top and left attribute values ​​will change accordingly

top is greater than or equal to 0
• left is greater than or equal to 0
• bottom is less than or equal to the window height
• right is less than or equal to the window width

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();

  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}

const options = {
  // 表示重叠面积占被观察者的比例，从 0 - 1 取值，
  // 1 表示完全被包含
  threshold: 1.0, 
  root:document.querySelector('#scrollArea') // 必须是目标元素的父级元素
};

const callback = (entries, observer) => { ....}

const observer = new IntersectionObserver(callback, options);

// 上段代码中被省略的 callback
const callback = function(entries, observer) { 
    entries.forEach(entry => {
        entry.time;               // 触发的时间
        entry.rootBounds;         // 根元素的位置矩形，这种情况下为视窗位置
        entry.boundingClientRect; // 被观察者的位置举行
        entry.intersectionRect;   // 重叠区域的位置矩形
        entry.intersectionRatio;  // 重叠区域占被观察者面积的比例（被观察者不是矩形时也按照矩形计算）
        entry.target;             // 被观察者
    });
};

const target = document.querySelector('.target');
observer.observe(target);

<div class="container"></div>

.container {
    display: flex;
    flex-wrap: wrap;
}
.target {
    margin: 5px;
    width: 20px;
    height: 20px;
    background: red;
}

const $container = $(".container");

// 插入 100000 个 <div class="target"></div>
function createTargets() {
  const htmlString = new Array(100000)
    .fill(&#39;<div class="target"></div>&#39;)
    .join("");
  $container.html(htmlString);
}

function isInViewPort(element) {
    const viewWidth = window.innerWidth || document.documentElement.clientWidth;
    const viewHeight =
          window.innerHeight || document.documentElement.clientHeight;
    const { top, right, bottom, left } = element.getBoundingClientRect();

    return top >= 0 && left >= 0 && right <= viewWidth && bottom <= viewHeight;
}

$(window).on("scroll", () => {
    console.log("scroll !");
    $targets.each((index, element) => {
        if (isInViewPort(element)) {
            $(element).css("background-color", "yellow");
        }
    });
});

const observer = new IntersectionObserver(getYellow, { threshold: 1.0 });

function getYellow(entries, observer) {
    entries.forEach(entry => {
        $(entry.target).css("background-color", "yellow");
    });
}

$targets.each((index, element) => {
    observer.observe(element);
});

The above is the detailed content of How does vue determine whether an element is in the visible area?. For more information, please follow other related articles on the PHP Chinese website!