javascript - ul リストの li 要素にスクロールする方法

Question

li 要素を持つ div 内に ul リストがあり、li 要素内には単一のチェックボックスがあります。チェックボックスのIDがあります。だから私はチェックボックスの親li要素を取得し、その位置までスクロールしたいと考えています。そして、私はそれを機能させることができません。

私のhtmlは次のようなものです：

<div id="divElement">
   <ul>
      <li>
         <input type="checkbox" id="343532532523" />
      </li>
   </ul>
</div>

次の 2 つの方法を試しましたが、うまくいきません。

$('#divElement').scrollTop($('#343532532523').parent().position().top);
$('#divElement').firstChild().scrollTop($('#343532532523).parent().position().top);

score 11 · Accepted Answer

バニラ JS バージョンが必要な場合は、次のようにするとうまくいきます。値 50 は、リストの一番上にいるときに項目全体を表示するためのものです。それを調整できます。

function updateListSelection(liID) {

    var list = document.getElementById("id Tag Of The <UL> element"),
        targetLi = document.getElementById(liID); // id tag of the <li> element

    list.scrollTop = (targetLi.offsetTop - 50);
};

score 4 · Accepted Answer

私の別の開発者の友人が私を助けてくれました、そして私たちはこれを思いつきました、そしてそれはうまくいきます、アニメートはありません、私はそれをすることができました私はそれを必要としません..

var offset = $('#someDivElementId ul li').first().position().top;
$('#someDivElementId').scrollTop($('#23532532532532').parent().position().top - offset);

score 3 · Accepted Answer

Element.scrollIntoView() アプローチを使用してこれを修正しました。

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

Chrome、Firefox、Internet Explorer で動作しましたが、他のブラウザではテストしていません。

score 3 · Accepted Answer

古い質問ですが、LI が現在上部にある場合は上部にスクロールし、現在下部にある場合は下部にスクロールする純粋な js 関数があります。これにより、上下の矢印を使用して UL をスクロールしている場合 (keydown イベントと keyup イベントに addEventListener を使用)、UL をスムーズにスクロールできます。

function scrollUL(li) {
    // scroll UL to make li visible
    // li can be the li element or its id
    if (typeof li !== "object"){
        li = document.getElementById(li);
    }
    var ul = li.parentNode;
    // fudge adjustment for borders effect on offsetHeight
    var fudge = 4;
    // bottom most position needed for viewing
    var bottom = (ul.scrollTop + (ul.offsetHeight - fudge) - li.offsetHeight);
    // top most position needed for viewing
    var top = ul.scrollTop + fudge;
    if (li.offsetTop <= top){
        // move to top position if LI above it
        // use algebra to subtract fudge from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - fudge;
    } else if (li.offsetTop >= bottom) {
        // move to bottom position if LI below it
        // use algebra to subtract ((ul.offsetHeight - fudge) - li.offsetHeight) from both sides to solve for ul.scrollTop
        ul.scrollTop = li.offsetTop - ((ul.offsetHeight - fudge) - li.offsetHeight) ;
    }
};

score 0 · Accepted Answer

これは、jQueryposition()を使用して親UL内のLI位置を取得しanimate()、ビュー内のチェックボックスをスクロールするために使用する簡単なデモです。

http://jsfiddle.net/qKGv8/

APIリファレンス：

http://api.jquery.com/position/ http://api.jquery.com/animate/

score 0 · Accepted Answer

楽しみのための癖:

window.location.href = window.location.origin+window.location.pathname+window.location.search+"#343532532523"

それが行うことは、URL部分を取得し、要素への実際のアンカーで元に戻すことです

あなたのサイトがウェブアプリのようなものでない場合、ほとんどの場合にうまくいくかもしれません =)

編集: 最新のブラウザーでは往復はありません。変更される URL の部分はアンカーのみです。ウェブアプリではないことについての私の考慮事項は、そのようなウェブサイトは通常、アンカーと履歴を編集するということです。

score 0 · Accepted Answer

promptAnswerBlock-->ul 要素 ID

$('#promptAnswerBlock').scrollTop($('#promptAnswerBlock')[0].scrollHeight + 150);

150 は単なるオフセット値です

あなたの要件に従って調整することができます

javascript - ul リストの li 要素にスクロールする方法

7 に答える 7

Related

Reference