I am making a comment system, there is a certain block in which there are others (messages) how, when scrolling through these messages, to find out whether the user sees one particular one (for example, with the identifier x) or not,
HTML:

<div class="parent">
  <div class="msg" id="a"></div>
  <div class="msg" id="b"></div>
  <div class="msg" id="c"></div>
  <div class="msg" id="x"></div>
</div>

CSS:

.parent {
    width: 100%;
    height: 100%;
    height: 89%;
    overflow: scroll;
    padding-top: 10px;
    padding-bottom: 70px;
}
.msg {
    width: 98%;
    height: 500px;
    padding: 10px;
    position: relative;
    margin: 0 auto;
    border: 2px hsl(174deg 72% 41%) solid;
    color: hsl(174deg 72% 41%);
    border-radius: 20px
px
;
    margin-top: 10px;
}

JS:

document.querySelector(".parent").onscroll = () => {
  //what to write here?
}

That is: if the message has become visible in the general block, then paint it in yellow
I tried different options: getComputedStyle, and getBoundingClientRect, and offset, but none of this helped me, they constantly say that the message is visible
BUT: getBoundingClientRect doesn't work, I don't need to check if it's visible in the whole window, I need to check if it's ONLY visible in a div element
WHEN SCROLLING A PARENT ELEMENT