可滚动到视图中的 div 内的滚动元素

Question

I have a little bit of a problem I'm a beginner programmer and writing my first web app, I came across a little bit of a problem.

I have a parent div with a height of 300px and inside that div I have 20 child divs and every single one of them has different id attribute and one div gets a special class that changes his appearance. I want that div always be seen by user so they don't have to scroll to find it.

I tried:

const renderStandings = (team,teamID) =>{
    let cssClass = "team-standing";
    if(team.team.id === teamID){
        cssClass = "team-standing  favouriteTeam";
    }

HTML markup

const markup = `
<div class="${cssClass}" data-teamID="${team.team.id}">
    <div class="team-position"><p>${team.position}</p></div>
    <div class="team-crest"><img src="src/img/logos/${team.team.id}.svg"></div>
    <div class="team-name"><p>${team.team.name}</p></div>
    <div class="team-gamesplayed"><p>${team.playedGames}</p></div>
    <div class="team-goaldiffrence"><p>${team.goalDifference}</p></div>
    <div class="team-points"><p>${team.points}</p></div>
</div>
    `;
    document.querySelector('.league-standings').insertAdjacentHTML('beforeend',markup);

Scroll into view

     if(document.querySelector('.favouriteTeam')){
            var el = document.querySelector('.favouriteTeam');
            el.scrollIntoView({
            behavior: 'auto',
            block: 'center',
            inline: 'center'
        });
    }
}
            
} 

That scrolls that div into the view exactly how I wanted it to, but it also scrolls the whole website to the parent div and I don't want that.

QUESTION

So the question is how do I scroll that div into view without scrolling the whole website. Preferably I would love to have answer in vanilla JS because that's what I'm practicing at the moment, and I don't plan to learn any frameworks until I'm comfortable with JS.

Illustrated result of what I want to achieve:

This is now and it scrolls the whole website

This is how I want it to be [2]: https://i.stack.imgur.com/Ldg3N.jpg

Answer 1

Inside my problem the answer was to use (scrollTop). Since every child div had 50px height I added atribute postition that gave me the position of element that I wanted to center (1-20), thanks to that I could calculate value of scrollTop for the element to be exacly in the center of scrollable div. Since 7 of them is already visible i started at 8th position.

if(document.querySelector('.favouriteTeam').getAttribute('data-teamposition')>7){
document.querySelector('.league-standings').scrollTop = 200 + ( 50 * (document.querySelector('.favouriteTeam').getAttribute('data-teamposition') - 8 ));
}