2

那里。我在弹出窗口中有一个项目(用户)列表。此列表位于可滚动的 div 中。我想创建一个搜索框,使用 jQuery 和 Javascript 计算所需用户在此列表中的位置,然后滚动到它。基本上,这就是我想要的:

function goToUser(userName) {
    var userPosition = getPosition(userName);
    $('#myContainer').scrollTop(userPosition);
}

function getPosition(userName){
    // ?????
}

以前有人遇到过这样的问题吗?谢谢你。

这是我用于弹出窗口的部分视图:

@using (@Html.BeginForm())
{
<div class="popupTitle">
    Choose user(s)
</div>
<div style="height: 400px; overflow: scroll" class="popupNotifications">
    @foreach (var user in Model.Users)
    {
        <div>
            <input id="Users-@user.id" name="targetIds" type="checkbox" value="@user.id" @if(Model.TargetIds != null && Model.TargetIds.Contains(user.id)){<text>checked="checked"</text>} />
            <label for="Users-@user.id" style="cursor: pointer;">@user.name</label>
        </div> 
    }
</div>
<div class="popupButtons">
    <input type="button" class="button" value="Save" onclick="GetValues(Notifications_UsersPopupHolder)" />
    <input type="button" class="button" value="Cancel" onclick="Cancel(Notifications_UsersPopupHolder)" />
</div>

}

4

4 回答 4

1

你试过$(element).scrollIntoView()吗?

我认为您的代码看起来像这样(不需要 getPosition 函数):

function goToUser(userName){
    $('div.popupNotifications input#' + username).closest('div').scrollIntoView();
}
于 2013-09-05T14:55:17.267 回答
0

如果列表中的所有项目的高度相同,则可以通过 (index + 1) * 项目高度来计算。

于 2013-09-05T14:37:51.193 回答
0

您可以使用offset().top特定元素的 。

function goToUser(userName) {
    var userPosition = getPosition(userName);
    $('.popupNotifications').scrollTop(userPosition);
}

function getPosition(userName){
    return $('.popupNotifications label:contains(' + userName + ')').offset().top;
}

示例小提琴

于 2013-09-05T14:38:58.680 回答
0

您可以为包含您的用户的元素分配一个 ID 或一些标识它的类(id="user1" 或 class="user1")

然后你可以简单地使用

$('#elementcontainingusers').scrollTop($('#user1').position().top);
于 2013-09-05T14:39:09.903 回答