jQuery Sortable List-排序时滚动条会跳起来 [英] jQuery Sortable List - scroll bar jumps up when sorting

问题描述

我创建了一个演示: http://pastebin.me/584b9a86d715c9ba85b7bebf0375e237

当滚动条位于底部并拖动项目以对其进行排序时，它会导致滚动条向上跳.它似乎是在FF，Safari，Chrome和IE(至少是IE8)中执行此操作的.

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

在Mac上的Firefox中，当滚动条位于底部时，它确实会跳转，但也会在整个列表中添加漂亮的Flash.它只是在向上滚动时闪烁整个列表.我相信，如果我找出导致向上滚动的原因(并且可以停止滚动)，则闪烁也将停止.

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.

我不喜欢它像那样的b/c跳起来，我感到它震撼和混乱.我知道这是一个极端的情况，但我想解决这个问题.

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?

谢谢

推荐答案

问题很简单.

首先让我们设置场景.您有一个可排序元素的列表，您的页面高于屏幕，因此它具有滚动条，页面位于最底部，滚动条一直向下.

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.

问题是，您要拖动一个导致jQuery将其从dom中删除的元素，然后添加一个占位符.让我们放慢速度，先删除元素，现在列表更短，导致页面更短，滚动条也更短.然后添加占位符，现在页面变长了，滚动条也变长了(但是窗口没有向下滚动，所以滚动条跳了起来).

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.

如果图片在可排序元素之一中，则除非您在标签中预先定义尺寸，否则上述代码将不起作用.原因是，当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());
    });
}

最终版本:

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

这篇关于jQuery Sortable List-排序时滚动条会跳起来的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！