JQuery Sortable Scroll，將向上滾動，但不會向下滾動

所以我的問題正如標題所示。我的工作是在JSP中，但爲了清晰起見，我已經盡我所能在HTML中重新創建了該問題。本質上，在主頁面（非簡化版本）中，我使用可排序的方式允許在拖放方法（移動列表項）中重新排列元素。該頁面只允許在頁面底部滾動（凹凸滾動），它只是簡單地擴展了包含div的底部並添加了滾動條。我需要的是當上面和下面有元素時（我已經設置了可排序的元素）我需要頁面/包含元素來允許我上下滾動。JQuery Sortable Scroll，將向上滾動，但不會向下滾動

以下代碼是令人難以置信的基本重新創建，當我不在元素的頂部時，此代碼允許我向上滾動，但在任何情況下都不會允許我在元素的任何點處向下滾動。

這裏是receation：

<html> 
    <head> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> 
<script> 
    $(function() { 
    $("#sortable").sortable({placeholder:"placeHolder", scroll: true, axis: "y", opacity: 0.5}); 
    $("#sortable").disableSelection(); 
    }); 
</script> 
<style> 
    #sortable{ 
    list-style:none; 
    } 
    .formatlist{ 
    border: 2px solid red; 
    padding: 40px; 
    margin: 5px; 
    width: 50%; 
    text-align: center; 
    } 
    .placeHolder{ 
    border: 2px solid #ff8833; 
    padding: 40px; 
    margin: 5px; 
    width: 50%; 
    text-align: center; 
    background-color: #ffee88; 
    } 
</style> 
    </head> 
    <body> 
    <div> 
    <ul id="sortable"> 
    <li class="formatSort"><div class="formatlist">NUMERO ONE This is a test on a list that drags LalLalala......</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO TWO This is a test on a list that drags LalLalala......</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO THREE This is a test on a list that drags LalLalala....</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO FOUR This is a test on a list that drags LalLalala.....</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO FIVE This is a test on a list that drags LalLalala.....</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO SIX This is a test on a list that drags LalLalala......</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO SEVEN This is a test on a list that drags LalLalala....</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO EIGHT This is a test on a list that drags LalLalala....</div></li> 
    <li class="formatSort"><div class="formatlist">NUMERO NINE This is a test on a list that drags LalLalala.....</div></li> 
    </ul> 
</div>

來源

2013-08-21 Phish

我很難在[jsFidde]（http://jsfiddle.net/apaul34208/pzGgK/）中重新創建您的問題。它似乎正確滾動。你能澄清嗎？ – apaul

@ apaul34208 - 我現在玩了很多，我認爲這是一個Firefox的問題！在JFiddle中重新創建，在Firebug中將JFiddle輸出窗口更改爲大於可見文檔大小，然後發生同樣的情況！ – Phish

@ apaul34208更多的玩法後，鉻和IE都喜歡這樣（YES ...甚至IE），但Firefox說不！ – Phish

我想我已經知道了，你錯過的文檔類型，我說：<!DOCTYPE html>在上面的文檔的最頂端開放<html>，它的工作。

<!DOCTYPE html> 
<html> 
    <head> ... and so on

jsFiddle自動添加它，因此很難重新創建它。

來源

2013-08-21 14:55:28 apaul

一定是在開玩笑吧！教導我去快速重新創造！現在，這可以幫助我慢慢剝離實際產品，並找到它的根源。非常感謝！ – Phish

@PhilWitherby這一切都很好，快樂的狩獵 – apaul

只要我有機會也會給你投票（> 15聲望）！ – Phish

JQuery Sortable Scroll，將向上滾動，但不會向下滾動

回答

相關問題