如何使用“ overflow-y：auto”设置元素，但是当我使用可排序的jQuery ui水平拖动项目时仍允许浏览器滚动？

我有一个使用jquery ui sortable的网页。我有一个列列表，其中每个列中都有一个html表。我正在使用可排序的jquery ui，以支持将表中的表行以及从一个表拖到另一个表中，类似于此jquery ui可排序的演示（但具有更多列）

我遇到的一个问题是，如果我有很多专栏，我似乎无法同时支持以下两个要求：

1. 如果表格中的垂直滚动条超过一定大小，则必须在其中包含垂直滚动条，以避免整个页面垂直滚动条

2. 对于包含许多列表的“宽”页面，我确实需要一个水平滚动条（以避免换行），但是当我一直向右拖动某些内容时，我希望水平滚动条与我一起滚动，以便我可以拖动从第一个列表到最后一个列表的项目，一直到最右边，而无需直接单击水平滚动条。

似乎＃2开箱即用（按照下面的jsFiddle），但是如果我尝试让＃1正常工作，它将破坏＃2。我知道在某种程度上可以支持上述两个要求的站点（例如trello）是可能的，但是我不知道它们是如何做到的。

这是我的CSS：

#allLists {
bottom: 12px;
left: 0;
position: absolute;
right: 0;
top: 10px;
white-space: nowrap;
}

.swimTableTbody {
 display: block;
 overflow: auto;  //this is what allows me to have vertical scroll bars on long tables
 width: 100%;
}

.list {
display: inline-block;
width: 300px;
top: 80px;
position: relative;
}

这是我的jQuery代码：

        $(".sortable").sortable({
            connectWith: ".sortable",
            placeholder: "ui-state-highlight",
            scroll: true,
            helper: function(e, tr)
            {
                var $originals = tr.children();
                var $helper = tr.clone();
                $helper.children().each(function(index)
                {
                    $(this).width($originals.eq(index).width());
                });
                $helper.css("background-color", "rgb(223, 240, 249)");
                return $helper;
            }
        });
        $("#sortable").disableSelection();

这是我的HTML的片段，以显示我正在渲染的内容：

<div id="allLists">

<span class="list">
<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

    </tbody>
</table>

</span>

<span class="list">

<table class="altRow ">
    <thead style="display:block;padding:0px">
    <tr>
        <th style="padding:4px 3px;" width="10">#</th>
        <th style="padding:4px 3px;" width="240">Name</th>
    </tr>
    </thead>
    <tbody class="sortable swimTableTbody" style="display:block;min-height: 25px;">

        <tr id="row_13666">
           <td width="10">&nbsp;</td>
           <td width="240">some content</td>
        </tr>
    </tbody>
</table>
</div>

更新

如下面所指出的，我可以通过删除此行来使上面的＃2处于开箱即用的状态

   overflow: auto;   // remove this line

从这个CSS：

 .swimTableTbody {
   display: block;
   overflow: auto;   // remove this line
   width: 100%; 
 }

但是，如果这样做，我将无法工作，并且没有在单个表中使用垂直滚动条，而是获得了整个页面的垂直滚动条，这是我不想要的。