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

Question

我有一点问题我是一名初级程序员，在编写我的第一个 web 应用程序时遇到了一点问题。

我有一个高度为 300px 的父 div，在那个 div 里面我有 20 个子 div，每个子 div 都有不同的 id 属性，一个 div 得到一个特殊的 class 改变他的外观。 我希望该 div 始终被用户看到，这样他们就不必滚动来找到它。

我试过：

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

HTML 标记

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);

滚动到视图

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

这完全按照我想要的方式将该 div 滚动到视图中，但它也将整个网站滚动到父 div，我不希望这样。

题

所以问题是如何在不滚动整个网站的情况下将那个 div 滚动到视图中。 最好我希望在 vanilla JS 中得到答案，因为那是我目前正在练习的，并且在我对 JS 感到满意之前，我不打算学习任何框架。

我想要达到的结果的图示：

这是现在，它滚动整个网站

这就是我想要的 [2]： https://i.stack.imgur.com/Ldg3N.jpg

Answer 1

在我的问题中，答案是使用 (scrollTop)。 由于每个子 div 的高度为 50px，我添加了属性 position，它给了我想要居中的元素的 position（1-20），因此我可以计算 scrollTop 的值，使元素恰好位于可滚动 div 的中心. 由于其中 7 个已经可见，我从第 8 个 position 开始。

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