Now there is such code , and, it would seem, it works as it should:

elem.style.top = this._coords.tops[step] + "px"; elem.style.left = this._coords.lefts[step] + "px"; elem.style.width = this._coords.widths[step] + "px"; elem.style.height = this._coords.heights[step] + "px";

Blocks are highlighted, by clicking on next, the transition to the next block is performed. In short, everything is fine. But there is one BUT (where without them?). If before the beginning of the script (in this case, the trigger is the "Start" button (so that the codepen does not have to refresh the page every time), and so the page loads), the page is slightly scrolled, then from the very beginning the selection block (with a red frame) is slightly offset, and specifically exactly as much as the page is scrolled. How to avoid such behavior?

That is, I need to get the position (and width with height) of the current element (selected), while scrolling the page. Or rather, it is better to even make sure that it doesn’t affect anything (perhaps just use the getBudleClientRect() alternative function. What is the question ).

Normal behavior Normal behavior

Scroll behavior Scroll behavior

PS All the code is on the link above.

    1 answer 1

    Replace line 34 with this: this._coords.tops.push (clientRect ["top"] + window.pageYOffset);

    • Some unusual behavior on my local machine. During initial scrolling, the size of the selection block grows exponentially relative to the scroll delta. - smellyshovel
    • But no, sorry. Just added to everything: both to height, and to width ... so works with a bang, I thank. - smellyshovel
    • But no, stop. Try to scroll the page, and then click Next. The offset does not go where it should be because scrolling is added to it. That is, with the first pass, this works, and with the following, it is already incorrect. - smellyshovel
    • The only crutch that came to mind is to check at which iteration we are now. If at first, then execute your code, and if not, then mine. Not very nice, however, but it works. PS If you immediately load the page, then scroll it up, and then click Next, then generally crap. So sorry, but the solution is still not very good. - smellyshovel
    • this._coords.tops.push (clientRect ["top"] + window.pageYOffset); add this line here: Excursion.prototype.fillCoords and there delete - user211866