當鼠標光標到達頂部或底部邊緣時滾動div

Question

我有這樣的div：

樹視圖控件（ ASTreeView ）實現了節點的拖放。

我想要實現的是在將節點拖向div的邊緣時自動滾動div，但我不確定應該怎么做。

需要注意的一個關鍵事項是它必須在IE8上工作，兼容模式啟用了IE7標准模式。

目前，當拖放時，用戶可以使用鼠標滾輪或鍵盤箭頭向上和向下滾動div，但它不夠好，因為那時我們必須指示用戶如何使用滾動 - 輪子或箭頭。

該頁面使用一些ASP.NET標記進行編碼，但包含TreeNode的實際面板呈現為div，如下所示：

<div id="MainContent_panel" style="border-bottom: 1px solid; border-left: 1px solid; 
width: 100%; height: 100px; overflow: auto; border-top: 1px solid; border-right: 1px solid;">

提前致謝。

Answer 1

有一個名為OnNodeDragAndDropStartScript的處理程序。你可以將它設置為這樣的函數：

function nodeDragging(sender, args)
{
    var container = sender.get_element();
    var divYCoord = $tree.getLocation(container).y;

    var currentYCoord = args.get_domEvent().clientY;
    var textbox = $get("textbox");

    if (currentYCoord > (document.body.clientHeight - 20))
        window.scrollBy(0, 20);

    window.status = "document.body.clientHeight:" + document.body.clientHeight + ":currentYCoord:" + currentYCoord + ":document.body.scrollTop:" + document.body.scrollTop + ":iTop:" + (currentYCoord - document.body.scrollTop) + ":" + args.get_domEvent().screenY + ":" + divYCoord;
    if(currentYCoord < 20)
        window.scrollBy(0, -20);
}

有關更多信息，請訪問： http ： //www.astreeview.com/astreeviewdemo/ASTreeViewDemo17.aspx

Answer 2

從@gaynorvader和這里的答案中獲取靈感，我提出了以下解決方案，如下所示：

使用這樣的HTML（在下面的代碼中，ASP.NET面板和樹視圖標記在瀏覽器中呈現為真實的HTML元素）：

<div id="container" style="border:1px solid;">
    <div id="top" style="background-color:red;height:20px;opacity:0.4;filter:alpha(opacity=40);"></div>
    <asp:Panel ID="panel" 
        Style="overflow:auto;" 
        runat="server"
        Width="100%" Height="100px">
        <cc1:ASTreeView ID="treeView1" 
                OnNodeDragAndDropStartScript="startDrag()"
                OnNodeDragAndDropCompletedScript="completedDragHandler()" ... />
    </asp:Panel>
    <div id="bottom" style="background-color:red;height:20px;opacity:0.4;filter:alpha(opacity=40);"></div>
</div>

我在這里做的是在面板的頂部和底部邊緣創建了兩個div元素，其中包含TreeView（所有三個元素都包含在'container'div中）。 兩個div元素的意圖是當鼠標光標在拖放時進入它們時它們可以啟動滾動。

然后，在TreeView的HTML中，我將兩個JavaScript函數與TreeView的拖動啟動事件（ OnNodeDragAndDropStartScript ）相關聯，並且它是拖動完成事件(OnNodeDragAndDropCompletedScript ）：

    function startDrag() 
    {
        $("#top").hover(function () {
            $("#MainContent_panel").animate({ scrollTop: 0 }, "slow");
        });

        $("#bottom").hover(function () {
            $("#MainContent_panel").animate({ scrollTop: $(window).scrollTop() + $(window).height() }, "slow");
        });
    } 

    function completedDragHandler() 
    {
        $("#top").off();
        $("#bottom").off();
    }

在drag start事件處理函數（ startDrag ）中，我使用JQuery將事件處理函數添加到'Hover'事件中。 只要鼠標光標進入div元素，就會調用此函數。

要啟動滾動，在包含TreeView的面板上調用JQuery animate API，並使用參數告訴它慢慢向上滾動。

在JQuery中，沒有任何參數向下滾動，因此從這里的答案中獲取靈感，我能夠實現向下滾動。

另外，我使用JQuery off()函數在拖動事件完成時刪除事件處理程序（ OnNodeDragAndDropCompletedScript ）。