jQuery用户界面 - 以某种方式拖动忽略溢出：隐藏

我做了一个拖动&使用jQuery UI的drop程序： Here's the link。jQuery用户界面 - 以某种方式拖动忽略溢出：隐藏

[在Chrome（！）（没有在其他浏览器上测试它尚未）]

到目前为止，它的伟大的工作，我要做的唯一事情就是添加更多的内容，并修复了一些bug。其中一个错误真的让我恼火，因为我不知道该怎么做。在中间你会看到一个可拖动的拖车。拖车有两个轮子，一个在顶部，另一个在底部。当您一直拖到底部时，页面会上升并忽略溢出。我认为这是因为轮子突出页面。

我做了使用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。

也许有办法强制页面始终坚持它的位置？

来源

2016-02-07 EasyBakeOven

如果您在#mainContainer上设置了overflow-y到hidden，它应该防止底部出现空白。

这适用于Chrome（v.49.0.2623.39），FireFox（v.44）和Edge（v.25.10586.0.0）。

来源

2016-02-07 12:05:00 Yass

哈哈，你又来了！无论如何感谢您的帮助，不能相信我以前没有想到这一点。 – EasyBakeOven

一个快乐的巧合:)没有probs！ – Yass

jQuery用户界面 - 以某种方式拖动忽略溢出：隐藏

回答

相关问题