javascript - jQuery UI - 以某种方式拖动会忽略溢出 :hidden

Question

我正在使用 jQuery UI 制作一个拖放程序: Here's the link .

[IN CHROME(!)(尚未在其他浏览器中测试过)]

到目前为止它运行良好，我唯一需要做的就是添加更多内容并修复一些错误。其中一个错误真的让我很烦，因为我不知道该怎么办。在中间你会看到一个可以拖来拖去的拖车。拖车有两个轮子，一个在顶部，一个在底部。当您将它一直拖到底部时，页面会上升并忽略溢出。我认为这是因为轮子伸出了页面。

我用 div 制作了那些轮子:

<section id="product">
    <div class="wheeltop"></div>
    <div class="wheelbottom"></div>
</section>

CSS

div[class*='wheel']{
    width:20%;
    height:8%;
    background-color: white;
    position: absolute;
    left:40%;
}

.wheeltop{
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border:solid 1px black;
    top:-8%;

}

.wheelbottom{
    border-bottom-left-radius: 15px;
    border-bottom-right-radius: 15px;
    border:solid 1px black;
    bottom:-8%;
}

如您所见，出现在屏幕底部的空白区域与每个“轮子”的高度相同。

我将 overflow:hidden 传递给了 body。

也许有一种方法可以强制页面始终固定在它的位置？

Answer 1

如果在 #mainContainer 上将 overflow-y 设置为 hidden，它应该可以防止底部出现空白。

这适用于 Chrome (v.49.0.2623.39)、FireFox (v.44) 和 Edge (v.25.10586.0.0)。