jQuery Sortable List - scroll bar jumps up when sorting

Question

I created a demo: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237

When the scroll bar is at the bottom and you drag items to sort them, it causes the scroll bar to jump up. It seems to do this in FF, Safari, Chrome, and IE (at least IE8).

In Firefox on my Mac, it does the jump up when the scroll bar is at the bottom, but also adds a nice flash to the whole list. It just flashes the whole list right as it scrolls it up. I believe that if I figure out what is causing the scroll up (and if I can stop it), the flashing will stop as well.

I don't like it jumping up like that b/c I find it jarring and confusing. I know this is a bit of a corner case, but I'd like to fix it if I could.

So, is there any way to prevent it from scrolling up? Alternately, what is causing it to scroll up?

Thanks

Answer 1

The problem is very simple.

First let's set up the scenario. You have a list of sortable elements, your page is higher than your screen so it has a scrollbar, your page is at the very bottom, the scroll bar all the way down.

The issue, you go to drag an element which causes jQuery to remove it from the dom then add in a placeholder. Let’s slow it down, it removes the element first, now the list is shorter causing the page to be shorter, causing the scrollbar to be shorter. Then it adds the placeholder, now the page is longer, now the srollbar is longer (but the window doesnt scroll back down, so it appears the scroll bar jumped up).

Best way I found to counteract this would be to ensure the sortable list has a static height, so removing an element doesn't cause it to go shorter. One method of doing this would be

create:function(){
    jQuery(this).height(jQuery(this).height());
}

The above will be called upon the creation of the sortable list, staticly setting its height to it's current height.

If you have pictures in one of the sortable elements, the above code will not work unless you pre-define the dimensions in the tag. Reason is that when the height() is called and set, it's calculating before the image is filled out. No dimension, then the image accounts for no space. Once the image loads, then will it take up space.

Here is a way around having to define dimensions. Simply resize the list height every time an image within is detected to be loaded.

create:function(){
    var list=this;
    jQuery(list).find('img').load(function(){
        jQuery(list).height(jQuery(list).height());
    });
}

Final version:

jQuery(document).ready(function(){  
    jQuery("div#todoList").sortable({
        handle:'img.moveHandle',
        opacity: 0.6,
        cursor: 'move',
        tolerance: 'pointer',
        forcePlaceholderSize: true,
        update:function(){
            jQuery("body").css('cursor','progress');
            var order = jQuery(this).sortable('serialize');
            jQuery.post("/ajax.php?do=sort&"+order,function(data){jQuery("body").css('cursor','default');});
        },
        create:function(){
            var list=this;
            var resize=function(){
                jQuery(list).css("height","auto");
                jQuery(list).height(jQuery(list).height());
            };
            jQuery(list).height(jQuery(list).height());
            jQuery(list).find('img').load(resize).error(resize);
        }
    });
});

Answer 2

I had the same issue when using a div container and div elements and setting the container height didn't help me, but explicitly setting overflow:auto css property on the containing div did fix the issue. Only tested in Chrome though.

Answer 3

I have experienced this issue as well. It happens when the list dictates the length of your page. When you start sorting, the list height changes for a split second, causing the page to jump. Here is an odd, but very functional solution to this problem:

$('ul').height($('ul').height());

Answer 4

Carl M. Gregory explains the issue perfectly, but I think his solution is unnecessarily complicated.

Setting list height to fixed value fixes the issue, but doing so at the moment of creating the list is way too early. You can use .mousedown() function to set the height right before the sorting starts. By this time any potential images are already loaded, so there is no need in checking their sizes.

So the jump doesn't occur, but now please consider this: You have multiple connected list and they are arranged vertically. Now this happens:

1. You start dragging from the upper list
2. The upper list now has fixed height
3. Move the item to the bottom list
4. Bottom list nicely adjusts, because its' height is auto
5. The upper list still has the same fixed height though it should be one item shorter

So at some point, you should return its' height back to auto. When? On mouseup is too late (see https://jsfiddle.net/937vv4tx/1/), but it's okay, you can return the correct value almost immediately after the jump is no more a threat. Using the start() event

Update: But you still want to set height to auto on .mouseup() because if you just click on item and don't start dragging, it still sets fixed height because the .mousedown() has already happened.

$('.sortable').mousedown(function() {
    // set fixed height to prevent scroll jump
    // when dragging from bottom
    $(this).height($(this).height());
}).mouseup(function () {
    // set height back to auto 
    // when user just clicked on item
    $(this).height('auto');
}).sortable({
    connectWith: '.sortable',
    placeholder: 'placeholder',
    start: function() {
        // dragging is happening
        // and scroll jump was prevented,
        // we can set it back to auto
        $(this).height('auto');
    }
});

This code works perfectly for me.

Answer 5

Lol, looks like this still isn't patched 4 years later. Here's the ticket.

Adding onto @Carl M. Gregory's answer, to fully take advantage of a dynamic container instead of setting it on a fixed height, i would edit the jquery.ui.sortable.js core file.

Simply move back line 228. this._createPlaceHolder... before line 208. this.helper.css("position", "absolute");

Thanks to Honda on the jquery ticket portal. Am using Sortable.js version 1.10.3.

Answer 6

So, complex! All you have to do is add overflow: auto; to the parent (ul, #element, whatever_you_call_it), and it should work. This ensures that even if the document changes height slightly, that when resizing, the overflow auto will retain the element's height.

Answer 7

Thanks for the great solution but I recommend using the following instead:

create:function(){
    var list=this;
    resize=function(){
        jQuery(list).css("min-height","0");
        jQuery(list).height(jQuery(list).height());
    };
    jQuery(list).css('min-height', jQuery(list).height());
}

Answer 8

Carl M. Gregory is explaining the 'why this is happening' very clearly.

However fixing the height doesn't seem enough, since the inner content can become taller when you resize the window.

What I wish could be done:

1. Listen to sortable 'start' event, and fix the height of the sortable container
2. Listen to sortable 'stop' event, and set back the height to auto (to make sure that there is no problem when resizing the window)

What happens in practice: The jump happens before we catch the start event, so this cannot be used

The workaround: listen to the jquery mousedown and mouseup events on the sortable items. It's very straightforward.

$(".sortable_item").mousedown(function(){
    $(".sortable_container").height($(".sortable_container").height());
}).mouseup(function(){
    $(".sortable_container").height('auto');
});

I suggest you still consider Carl's point about images loading. His answer is worth a read.

Answer 9

Seems like jQuery UI 1.9.2 solved the issue.

If you are unable to change the library, there's a workaround including a simple scroll bar operation. The idea is simple:

• Keep the previous scroll position every time you scroll.
• Set scroll back to the previous position when you start dragging your element.

Here you go;

var lastScrollPosition = 0; //variables defined in upper scope
var tempScrollPosition = 0;

window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function () {
        tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
    }, 250));

    lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
};

$("#YourSortablePanel").sortable({
    start: function (event, ui) {
        $(document).scrollTop(tempScrollPosition);
    }
});

Answer 10

I had this issue in Chrome. And all sortable divs had fixed height.

Problem was in css property position: relative of these divs. When div was dragged and removed from DOM, it's coordinates were calculated wrong due to relative position.

Inherit or absolute positioning should be used for sortable elements.

Answer 11

This is how i solve the issue.

   $(".groups").sortable({
    ...
    helper: function(event, ui){
      lastScrollPosition =  $("body").scrollTop();
    },
    start: function(e, ui){
        // avoid scroll jump
        $("body").scrollTop(lastScrollPosition);
    },
   });

Answer 12

I was loading my sortable divs VIA Ajax into a wrapper with an auto height.

Instead of trying to link into sortable events, I just made the height auto when loading and changing the list and then set it to a static height afterwards.

Vit's solution is similar, but I didn't want to add unnecessary overhead by doing this on every mousedown and mouseup event. Instead, I just do it when the list is changing on the load or when new elements are added (I use a slideDown animation and just set the height to static when it is complete).

$("#wrapper").load("list.php",function() {
    $("#wrapper").css({ "height":"auto" });
    $("#wrapper").css({ "height": $("#wrapper").height() });
}

The other solutions weren't working for me when I reload data as I only made them sortable once during the page load.

My list/div changes with a dropdown so I am able to select different lists and my wrapper resizes accordingly without the annoying jump.

If you need to add elements or reload anything, just throw those two lines of code into a function and call the function.

Hope this helps someone!

Answer 13

Here is another easy option to solve this problem.

1. when mouseenter your sorting Icon,

   $("body").css("overflow-y","hidden");
   

2. when mouseleave your sorting Icon

   $("body").css("overflow-y","scroll");