Scroll a div when mouse cursor reaches top or bottom edge

Question

I have a div like this:

enter image description here

The Tree View control (ASTreeView) implements dragging and dropping of nodes.

What I would like to implement is the automatic scrolling of the div when dragging a node towards the edge of the div, but I'm not sure how I should go about this.

One key thing to note is that it must work on IE8 with Compatibility Mode enabled with IE7 Standards mode.

Currently, when dragging and dropping, the user is able to use the mouse scroll-wheel or the keyboard arrows to scroll the div upwards and downwards, but it's not quite good enough since then we have to instruct the users how to use the scroll-wheel or arrows.

The page is coded using some ASP.NET markup, but the actual panel containing the TreeNode renders as a div, like this:

<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;">

Thanks in advance.

Can you put up some of your code? Are you using jQuery-UI `sortable`? — gaynorvader, Nov 28 '13 at 11:22
No, JQuery UI's Sortable API only seems to work with lists, where I'm working with a TreeView control. I'm using ASTreeView, which has its own drag and drop restructuring implementation. I'll add some code (apologies for neglecting to do it the first time) — Ciaran Gallagher, Nov 28 '13 at 11:26
Possible (similar) duplicate of: http://stackoverflow.com/questions/6677035/jquery-scroll-to-element You could set up a handler so that while the mouse is down it loops over that script making the div scroll so that the element is always visible. — Michael Coxon, Nov 28 '13 at 11:30
See this post: mabee it helps http://stackoverflow.com/questions/11222047/how-to-scroll-when-cursor-is-on-the-edge-of-div?rq=1 — Marinus, Nov 28 '13 at 11:42
@MichaelCoxon, the question you link is for scrolling to a particular element on clicking it. My question is about automatically scrolling a div panel when the mouse cursor is near the edge of the top and bottom edges whilst dragging an element. Not the same, barely similar. I am able to hook into the event that is invoked when the drag starts, and so this is likely where code would go to scroll the page depending on where the mouse cursor is when dragging. — Ciaran Gallagher, Nov 28 '13 at 12:14
Apart from the div panel, I just declare the TreeView control inside it (using ASP.NET tags which get rendered into real HTML at runtime) and give it some options, so I don't see any use in posting more code. — Ciaran Gallagher, Nov 28 '13 at 12:18
@MichaelCoxon although the post you linked to still is helpful! — Ciaran Gallagher, Nov 28 '13 at 12:22

score 1 · Answer 1 · answered Nov 28 '13 at 11:46

There's a handler called OnNodeDragAndDropStartScript built in. You could set it to a function like this:

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);
}

For more information: http://www.astreeview.com/astreeviewdemo/ASTreeViewDemo17.aspx

score 1 · Accepted Answer · edited May 23 '17 at 11:59

Taking inspiration from @gaynorvader and the answer located here, I came up with the following solution that looks like this:

enter image description here

with HTML like this (in the below code the ASP.NET panel and tree view markup is rendered as real HTML elements in the browser):

<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>

What I've done here is created two div elements at the top and bottom edge of the panel which contains the TreeView (with all three elements contained within a 'container' div). The intent of the two div elements is that they can initiate the scrolling when the mouse cursor enters them while dragging and dropping.

Then, In the HTML for the TreeView, I've associated two JavaScript functions with the TreeView's drag start event (OnNodeDragAndDropStartScript) and it's drag completed event (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();
    }

In the drag start event handler function (startDrag), I've used JQuery to add an event handler function to the 'Hover' event. This function is invoked whenever the mouse cursor enters the div element.

To initiate the scroll, the JQuery animate API is invoked on the panel containing the TreeView, with arguments to tell it to scroll upwards slowly.

In JQuery, there is no argument to scroll downwards, and so taking inspiration from the answer here, I was able to implement a downward scroll.

Additionally, I used the JQuery off() function to remove the event handlers when the drag event has completed (OnNodeDragAndDropCompletedScript).

Scroll a div when mouse cursor reaches top or bottom edge

2 Answers2