我正在使用 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
。
也许有一种方法可以强制页面始终固定在它的位置?
最佳答案
如果在 #mainContainer
上将 overflow-y
设置为 hidden
,它应该可以防止底部出现空白。
这适用于 Chrome (v.49.0.2623.39)、FireFox (v.44) 和 Edge (v.25.10586.0.0)。
关于javascript - jQuery UI - 以某种方式拖动会忽略溢出 :hidden,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35252940/