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

リスト内のすべてのアイテムが同じ高さの場合、(インデックス + 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 に答える