1. 首頁
  2. 問答
  3. 當在Firefox中列表的底部時，JQuery UI排序不會滾動

當在Firefox中列表的底部時，JQuery UI排序不會滾動

2017-03-24 45 views
0

我有一個針對表的JQuery UI Sortable。在Firefox中，當你點擊並拖動一行到最底層的Chrome瀏覽器時，會爲你滾動列表，但是在Firefox中，它只是將屏幕拖動到最後一個可見行下方的空白處。當在Firefox中列表的底部時，JQuery UI排序不會滾動

這個特定的表格是在一個具有固定高度的div內。

我使用的是JQuery 2.1.0和JQuery UI 1.12。

下面是一個代碼筆： - https://codepen.io/anon/pen/BWVpdE

下面是HTML： -

<div class="scrollableContainer"> 

<table> 
    <thead> 
     <tr class="ui-state-default"> 
     <th colspan="4">Original</th> 
     <th colspan="4">table heading</th> 
     <th colspan="4">table heading</th> 
     <th colspan="4">table heading</th> 
     <th colspan="4">table heading</th> 
     <th colspan="4">Current Pos</th> 
     </tr> 
    </thead> 
    <tfoot> 
     <tr class="ui-state-default"> 
     <th colspan="4">Original</th> 
     <th colspan="4">table footer</th> 
     <th colspan="4">table footer</th> 
     <th colspan="4">table footer</th> 
     <th colspan="4">table footer</th> 
     <th colspan="4">Current Pos</th> 
     </tr> 
    </tfoot> 
    <tbody> 
    <tr class="ui-state-default"> 
     <th colspan="4">First Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">1</td> 
    </tr> 
    <tr class="ui-state-default even"> 
     <th colspan="4">Second Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">2</td> 
    </tr> 
    <tr class="ui-state-default"> 
     <th colspan="4">Third Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">3</td> 
    </tr> 
    <tr class="ui-state-default even"> 
     <th colspan="4">Fourth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">4</td> 
    </tr> 
    <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
      <tr class="ui-state-default"> 
     <th colspan="4">Fifth Row</th> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">data</td> 
     <td colspan="4">5</td> 
    </tr> 
    </tbody> 
</table> 
</div>

這裏是SCSS： -

.scrollableContainer { 
    padding-top:60px; 
    height: 200px; 
    position:relative; 
} 
.scrollArea { 
    height:100%; 
    overflow-x:hidden; 
    overflow-y:auto; 
} 
table { 
    border-collapse: collapse; 
    overflow-x: hidden; 
    overflow-y: auto; 
} 

td, th { 
    background: #fff; 
    border-width: 0; 
    border-bottom: 1px solid #B8B8B8; 
    font-weight: normal !important; 
    padding: 15px; 
    text-align: left; 
    vertical-align: middle; 
} 

tr.even { 
    td, th { 
    background: #f1f1f1; 
    } 
} 

thead, tfoot { 
    text-transform: uppercase; 

    th { 
    background: #ccc; 
    } 
} 

body { 
    color: #111; 
    font-size: 16px; 
    font-family: sans-serif; 
}

這裏是JS： -

$("table tbody").sortable({ 
    update: function(event, ui) { 
    $(this).children().each(function(index) { 
      $(this).find('td').last().html(index + 1) 
    }); 
    } 
});

來源

2017-03-24 user1545858

回答

0

好的，所以我有fo以及使用MutationObserver和getBoundingClientRect的解決方案。

實際上，這不是一個很好的解決方案，但它有效。

這裏是更新JS： -

var observer = null; 
// Code taken from: http://stackoverflow.com/a/27263050/1545858 
$.expr.filters.offscreen = function(el) { 
    var rect = el.getBoundingClientRect(); 
    return (rect.x + rect.width) < 0 
      || (rect.y + rect.height) < 0 
      || (rect.x > window.innerWidth || rect.y > window.innerHeight) 
     ; 
}; 
$("table tbody").sortable({ 
    start: function(event, ui) { 
    observer = new MutationObserver(function(mutations) { 
     window.requestAnimationFrame(function() { 
     if (mutations[0].attributeName === 'style') { 
      if (ui.item.is(':offscreen')) { 
       window.requestAnimationFrame(function() { 
        ui.item[0].scrollIntoView();    
       }); 

      } 
     } 
     }); 
    }); 
    observer.observe(ui.item[0], { attributes: true }); 
    }, 
    stop: function(event, ui) { 
    observer.disconnect(); 
    }, 
    update: function(event, ui) { 
    $(this).children().each(function(index) { 
      $(this).find('td').last().html(index + 1) 
    }); 
    } 
});

如果任何人都可以讓我知道爲什麼我要做到這一點，那將是很好的。我感覺這是JQuery/JQuery UI/Firefox中的一個錯誤，但我不知道爲什麼。

謝謝。

來源

2017-03-26 20:54:55 user1545858

相關問題

 相關問題