DataTables: Kiedy pasek przewijania z tbody jest ukryta, stała kolumna dostaje pomieszane

Question

Mam tabelę, która zawiera:

1. pierwsza kolumna jest stała
2. TFOOT
3. poziomy pasek przewijania z TFOOT
4. mają ukryty poziomy pasek przewijania tbody.

Fiddle: https://jsfiddle.net/jbeteta/6sxh3gbk/12/

$(function() { 
       $('#example').DataTable({   
      "fnInitComplete": function() { 
         // Disable scrolling in Head 
         $('.dataTables_scrollHead').css({ 
          'overflow-y': 'hidden !important' 
         }); 

         // Disable TBODY scroll bars 
         $('.dataTables_scrollBody').css({ 
          'overflow-y': 'scroll', 
          'overflow-x': 'hidden', 
          'border': 'none' 
         }); 

         // Enable TFOOT scoll bars 
         $('.dataTables_scrollFoot').css('overflow', 'auto'); 

         // Sync TFOOT scrolling with TBODY 
         $('.dataTables_scrollFoot').on('scroll', function() { 
          $('.dataTables_scrollBody').scrollLeft($(this).scrollLeft()); 
         }); 

        }, 
       scrollX: true, 
       paging: true, 
       fixedColumns: { 
        leftColumns: 1 
       } 
}); 
     }); 

W tym scenariuszu podczas przewijania po prawej stronie, widać, że ostatnią komórkę wiersza stałej kolumnie (kolor tła: czerwony) dostać zawiedli, ponieważ pasek przewijania w poziomie jest ukryty.

Moje pytanie: czy istnieje sposób, aby to poprawić?

Przy okazji: musiałem ukrywać poziomy pasek przewijania <tbody>, ponieważ nie jest on zsynchronizowany z paskiem przewijania <tfoot>.

Dziękujemy

EDIT: W Chrome jest taka sama:

Answer 1

Oto rozwiązanie częściowo. Cała konfiguracja to ogromna mieszanka różnych tabel i elementów div. Z jakiegoś powodu ukryte paski przewijania nadal mają "efekt" dla kilku elementów div, to znaczy nadal zajmują przestrzeń i reagują, gdy przewija się inne elementy. Być może naprawdę, bardzo ostrożna próba i błąd CSS-ing na każdym elemencie/pojemniku może rozwiązać ogólny problem, ale dla mnie wydaje się, że oczekiwane zachowanie przeglądarki, po prostu "takie, jakie jest". Ale na WebKit przeglądarek można to zrobić:

div:not(.dataTables_scrollFoot)::-webkit-scrollbar { 
    display: none; 
} 

https://jsfiddle.net/6sxh3gbk/19/

To będzie skutecznie wyłączyć wszystkie paskudne ukryte (ale nie naprawdę ukryty) paski przewijania na wstrzyknięte <div> elementów, ale zachować je w element stopki, z którym chcemy przewijać.

Ale to dotyczy tylko webkit browsers: Chrome, chrom, Safari, Opera i Android.

Gecko (mozilla) kiedyś miał podobną funkcję: -moz-scrollbars-none, ale została wycofana i pominięta. AFAIK jest stałym wołaniem o przywrócenie go.

Dotyczy to również Edge, issue is still being raised. Dla Edge istnieje realna nadzieja, ponieważ MS wiele razy stwierdzało, że EdgeHTML ma być w pełni kompatybilny z mechanizmem WebKit.

Częściowo rozwiązanie obejmujące około 85% wszystkich urządzeń.

Answer 2

Proszę sprawdzić ..

1. pierwszej kolumnie jest stałym
2. TFOOT
3. poziomego przewijania pasek tfoot
4. mają ukryty poziomy pasek przewijania tbody.

ten problem został rozwiązany. Twój ans znajduje się poniżej linku ..

$(function() { 
     $('#example').DataTable({   
    scrollY:  "300px", 
    scrollX:  true, 
    scrollCollapse: true, 
    paging:   false, 
    fixedColumns: { 
     leftColumns: 1 
    } 
     }); 
    }); 

Fiddle