想在我的看板中实现自动水平滚动功能

问：

我想制作一个看板，在每列卡片列表中都有多个列，我希望能够在列之间移动卡片或在特定列中排序。一切都很好。但是，当我需要水平滚动时，当我想将卡片从一列水平移动到另一列时，如何实现自动滚动？ 假设我的卡在屏幕最左侧的第一列，我的目的地是最后一列，在最右侧的视野端口之外，我需要自动滚动。 现在，在列表中垂直自动滚动效果很好。

我使用可排序的 JS 将卡片从一列移动到另一列，并且我正在使用 Ruby on Rails 框架。

我尝试了很多解决方案，但效果不佳，所以如果您提供任何解决方案，它将非常有帮助，在这里我附上我的可排序 JS 代码。

$(".kanban-column, .kanban-column .sub-tickets, .sub-card").sortable({
      connectWith: ".kanban-column",
      cancel: "#main-tickets, .heading",

      start: function () {
        $("body").css("overflow-x", "hidden");
      },
      out: function () {
        $(this).addClass("bg-transparent");
      },

      over: function () {
        $(this).removeClass("bg-transparent");
        $(this).addClass("bg-black bg-opacity-10");
      },

      receive: function (event, ui) {
        $("body").css("overflow-x", "auto");
        var kanban_col_id = this.parentElement.dataset.item
        var resource_info_id = ui.item[0].dataset.resource_info_id
        var resource_status = ui.item[0].dataset.resource_status
        var created_by = ui.item[0].dataset.created_by