Poziomo przewijany stół w Angular md-content

Question

W Angular 1.5 Mam tabelę w <md-content>. Dynamicznie dodam kolumny do tabeli, aw pewnym momencie pojawią się poziome paski przewijania. To jest dobre.

Ale wadą jest to, że nowe kolumny nie są widoczne. W jaki sposób mogę programowo przewijać poziomo, aby nowe kolumny były widoczne?

Answer 1

Jak napisałem w komentarzu, tutaj masz dyrektywę working plunker przy użyciu dyrektywy angular-scroll-glue.

Kluczem tutaj jest dołączenie dyrektywy scroll-glue-right do twojego md-content.

<md-content scroll-glue-right> 
    ... 
</md-content> 

Zobacz pełny kod here

EDIT: Jeśli chcesz przewinąć programowo zamiast automatycznie jak w pierwszym plunker można wiązać scroll-glue-right do atrybutu kontrolera. Przykład:

<md-content scroll-glue-right="glued"> 
... 
</md-content> 

Kiedy glued jest ustawiony na true, przewijania zostanie zwolniony. plunker robocza here

Nadzieja pomaga

Answer 2

Pan spojrzał na scrollLeft? Można uzyskać pozycję przewijane elementu, a następnie przewinąć rodzica do tej pozycji:

container.scrollLeft = childToScrollTo.getBoundingClientRect().left; 

Można oczywiście zbudować to do dyrektywy, jeśli potrzeba, lub może po prostu uruchomić coś takiego po dodaniu kolumna. Oto krótkie demo:

var scroll = function(){ 
 
    var container = document.getElementById('container'); 
 
    var childToScrollTo = document.getElementById('scrollto'); 
 
    
 
    container.scrollLeft = childToScrollTo.getBoundingClientRect().left; 
 
}

#container{ 
 
    white-space: nowrap; 
 
    overflow: auto; 
 
    width: 400px; 
 
} 
 

 
.child{ 
 
    display:inline-block; 
 
}

<button onclick="scroll()">scroll</button> 
 
<div id="container"> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child" id="scrollto">scroll here!</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
    <div class="child">child</div> 
 
</div>