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用戶界面 - 以某種方式拖動忽略溢出：隱藏

回答

相關問題