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