Autoscroll display issue if the total marginTop is not equals to 0

[AXCWG]

Before applying marginTop to ANY parent element or to itself:

After applying:

The highlighted line was up in the area of the red circle, making it overflowed hidden.

However, if opened the site in the browser without the marginTop, making it normal, then add the marginTop style back, the scroll will act normally.

Fav bar for reference

[AXCWG]

Before:

 return <div style={{}}>
        <Lrc  style={{height: "300px"}} onLineUpdate={({index, line}) => {
            console.log(index)
        }} lrc={...}
              currentMillisecond={sec} verticalSpace={false}
              lineRenderer={({index, active, line}) => {

                  return <>

                      <div id={index} className={"lyric-box-scroll"} style={{
                          fontSize: active ? "xx-large" : "revert",
                          textAlign: "center"
                      }}>{line.content}</div>
                  </>
              }}
        />
    </div>

After:

 return <div style={{marginTop: "200px"}}>
        <Lrc  style={{height: "300px"}} onLineUpdate={({index, line}) => {
            console.log(index)
        }} lrc={...}
              currentMillisecond={sec} verticalSpace={false}
              lineRenderer={({index, active, line}) => {

                  return <>

                      <div id={index} className={"lyric-box-scroll"} style={{
                          fontSize: active ? "xx-large" : "revert",
                          textAlign: "center"
                      }}>{line.content}</div>
                  </>
              }}
        />
    </div>

[mebtte]

@AXCWG Do you mean prop verticalSpace ?

[mebtte]

[AXCWG]

@AXCWG Do you mean prop verticalSpace ?

No. As shown in the picture, if I set a margin-top style on the container, the lyrics that is actually activated would be hidden into the "margined" area, meaning it would be covered by whitespace and is unable to see.
It happens all the time unlike vertical space which only happens at the start of the lyric component.

tl;dr, At anytime, if the <Lrc> prop was not touching the top of the browser viewport, the scrolling will be offsetted.

[mebtte]

It's a correct behavior for react-lrc. react-lrc uses overflow=auto to make container scrollable, as overflow=auto will hidden the content out of it.

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

[AXCWG]

It's a correct behavior for react-lrc. react-lrc uses overflow=auto to make container scrollable, as overflow=auto will hidden the content out of it.

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

So what should I do if i dont want to make the component touch the top of the viewport? I just can't?

[mebtte]

It's a correct behavior for react-lrc. react-lrc uses overflow=auto to make container scrollable, as overflow=auto will hidden the content out of it.

• https://developer.mozilla.org/en-US/docs/Web/CSS/overflow

So what should I do if i dont want to make the component touch the top of the viewport? I just can't?

I think it's not possible to do it.