jQuery 可排序列表-排序时滚动条向上跳动

在本文中，我们将介绍使用jQuery Sortable List插件时，在对列表进行排序时出现滚动条向上跳动的问题，并提供解决方案。

阅读更多：jQuery 教程

问题描述

当我们使用jQuery Sortable List插件对长列表进行排序时，很可能出现一个问题：在拖动列表项进行排序时，页面的滚动条会突然向上跳动，导致用户体验不佳。

问题原因

这个问题的原因是jQuery Sortable List插件默认会将拖动的列表项动态插入到目标位置，同时会自动滚动页面，以便用户看到列表项的插入位置。然而，这种滚动操作会导致滚动条突然向上跳动的现象。

解决方案

为了解决滚动条向上跳动的问题，我们可以通过修改jQuery Sortable List插件的默认行为来实现。

首先，我们可以设置插件的scroll属性为false，这样在拖动过程中，页面将不再滚动。

$( "#sortable-list" ).sortable({
  scroll: false
});

然而，如果列表高度超出了父容器的高度，我们依然需要滚动以显示列表的完整内容。这时，我们可以使用另一个参数scrollSensitivity来调整滚动的敏感度。将其值设置得较大一些，比如20，可以使滚动操作更平滑。

$( "#sortable-list" ).sortable({
  scroll: true,
  scrollSensitivity: 20
});

这样，在列表的顶部和底部拖动时，页面将以较小的步长进行滚动操作，保持较好的用户体验。

示例

下面是一个使用jQuery Sortable List插件的示例，我们将对其进行修改以解决滚动条向上跳动的问题。

<html>
  <body>
    <div id="container" style="height: 200px; overflow-y: auto;">
      <ul id="sortable-list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
        <li>Item 5</li>
        <!-- 重复5次 -->
      </ul>
    </div>

    <script src="jquery.js"></script>
    <script src="jquery-ui.js"></script>

    <script>
      $( "#sortable-list" ).sortable({
        scroll: true,
        scrollSensitivity: 20
      });
    </script>
  </body>
</html>