1

dragscroller プラグインを使用して、マウスの移動で div をスクロール可能にしています! スクロール可能な div 内には約 100 のサブ要素があります。これらの要素には、クリック イベントがバインドされています。私がやろうとしているのは、サブ要素がクリックされると、div の一番上にスクロールされるはずです。次の関数を使用してこれを取得しますが、問題は、下部の要素に手動でスクロールしてクリックすると、予期しない位置にスクロールされることです。

function billScroller(elem){
    var parentTopCoordinate = $('#bill-list').offset().top;
    var elementCoordinate = $(elem).parent().offset().top;
    var scrollPosition = ( elementCoordinate - parentTopCoordinate ) - 2;

    $('#bill-list').animate({ scrollTop: scrollPosition },1000);

}


$(document).on('click',".bill-description",function()
    {
        //close all bills 
        $(".bill-item-list").not($(this).next(".bill-item-list")).slideUp(600);

        billScroller(this);

        //open the clicked bills
        $(this).next(".bill-item-list")
            .slideToggle(600);


    });

この問題を解決するにはどうすればよいですか。フィドルを作成しようとしましたが、コードが多すぎて、一部の要素が ajax 応答を使用して描画されています。

更新: これは要素階層です。

<div id="bill-list">

                        <div id="bill-panel">
                        <!-- Bill -->
                        <div class="bill">

                            <!-- Bill description - Holds Bill details -->
                            <div class="bill-description">
                                <div class="bill-info bill-number"><span>000A</span></div>
                                <div class="bill-info table-name"><span>TABLE 78</span></div>
                                <div class="bill-info room-number"><span>A678</span></div>
                                <div class="bill-info amount"><span>76.00</span></div>
                                <div class="bill-remove-icon"></div>
                            </div>

                            <!-- Bill Item list -->
                            <div class="bill-item-list">

                                <!-- Item : This is a sample element & will be cleared when system loads -->
                                <div class="bill-item">

                                    <!-- Item image -->
                                    <div class="bill-item-img"></div>

                                    <!-- Item description -->
                                    <div class="bill-item-description">
                                        <div class="bill-item-name">

                                            <!-- Item Name -->
                                            <p class="bill-item-name-left">Normal Cofee</p>

                                            <!-- Item Price -->
                                            <p class="bill-item-name-right">170.00</p>

                                            <div class="clear"></div>
                                        </div>

                                        <!-- Total item price -->
                                        <div class="bill-item-price">
                                            <span>170.00</span>
                                        </div>

                                        <!-- Item Quantity -->
                                        <div class="bill-item-amount">
                                            <span>1</span>
                                        </div>

                                    </div>

                                    <!-- Increas & Decrease item Quantity -->
                                    <div class="bill-amount-selection">
                                        <a class="amount-increase" href="#"></a>
                                        <a class="amount-decrease" href="#"></a>
                                    </div>

                                </div>

                                <!-- Remove bill link -->
                                <div class="item-drop-point"></div>

                            </div>
                        </div>
                        </div>                      

                    </div>

請求パネルはスクロール可能で、請求は ajax 呼び出しを使用して生成されます。請求書には複数のアイテムを含めることができ、トグル スライド機能を使用してアイテム リストを開いたり閉じたりできます。

4

0 に答える 0