Before specifying the attributes and position of the target node, you need to obtain the page node information as follows.
The node information query API is used to obtain node information such as their attributes, styles, and positions on the UI.
The most common method is to query the current position of a node. The sample code is as follows:
const query = has.createSelectorQuery();
query.select('#elem-id').boundingClientRect(function (res) {
const top = res.top; // Top margin
});
query.exec(); The has.createIntersectionObserver API is used to listen for the intersection status of two or more component nodes in the layout, enabling detection of user-visible nodes and their proportion.
The following sample code allows the callback function to be triggered each time the target node (specified by .target-elem) enters or leaves the page display area:
Page({
onLoad: function () {
has.createIntersectionObserver().relativeToViewport().observe('.target-elem', (res) => {
const rect = res.intersectionRect; // Intersection area
});
}
})