javascript - Chrome 随机滚动 Javascript 事件

Question

我在这里创建了一个 fiddle :http://jsfiddle.net/2hzd555w/1/

var canvas = $("#container");

canvas.on('click', '.element-buttons button', function(e) {
        e.preventDefault();

        var element = $(this).closest('.element');
        var element_order = element.find('input.order');

        if ($(this).hasClass("move-element-up")) {
          var prev = element.prev('.element');
          if (prev.length > 0) {
            var prev_order = prev.find('input.order');
            prev_order.val(element_order.val());
            element_order.val(parseInt(element_order.val()) - 1);
          }
        } else {
          var next = element.next('.element');
          if (next.length > 0) {
            var next_order = next.find('input.order');
            next_order.val(element_order.val());
            element_order.val(parseInt(element_order.val()) + 1);
          }
        }

        moveElements();
 });

var moveElements = function() {
    $('.element').sort(function(a, b) {
        return parseInt($(a).find('input.order').val()) - parseInt($(b).find('input.order').val());
      }).detach().appendTo(canvas);
}

因此，在您按下几个向上/向下按钮来移动 div 之后，您会注意到结果部分会意外地滚动到顶部或该区域的另一部分。

现在这只发生在 Chrome 上，它在 Firefox 中正常工作。

任何帮助将不胜感激，几周来我一直在用头撞墙。

注意:您可能需要多次上下点击(在某些情况下需要 2 分钟)，确保在结果窗口中也向下滚动。

Answer 1

很明显，.detach() 基本上清空了页面，因此不需要滚动条，您最终位于页面顶部。

解决这个问题的一个 hacky 方法是临时固定 container 的高度，以便页面高度保持不变，然后在完成 detach/后将其删除附上:

var moveElements = function() {

    // set height to its calculated height
    canvas.height(canvas.height());

    $('.element').sort(function(a, b) {
        return parseInt($(a).find('input.order').val()) - parseInt($(b).find('input.order').val());
      }).detach().appendTo(canvas);

    // reset the height to auto
    canvas.height('');
}

Updated Fiddle

我确信一定有更好的方法解决这个问题，或者您可以在排序期间实际分离和附加元素，但这听起来效率不高。