时间戳

首页 > 解决方案 > 可滚动到视图中的 div 内的滚动元素

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

问题描述

我有一点点问题我是一个初学者程序员并且正在编写我的第一个网络应用程序，我遇到了一点点问题。

我有一个高度为 300px 的父 div，在该 div 内我有 20 个子 div，每个子 div 都有不同的 id 属性，一个 div 有一个特殊的类来改变他的外观。我希望用户始终可以看到该 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

标签： javascriptecmascript-6scroll

解决方案

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

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

推荐阅读