Angular md-content içinde yatay olarak kaydırma tablosu

Question

Açısal 1.5 <md-content> içinde bir tablom var. Tabloya dinamik olarak sütunlar ekliyorum ve belirli bir noktada yatay kaydırma çubukları belirir. Bu iyi.

Ancak buradaki bozuk bölüm, yeni sütunların görünmez olmasıdır. Yeni sütunların görünebilmesi için <md-content>'umu nasıl programlamal olarak kaydırmalıyım?

Answer 1

Bir yorumda bulunduğum sırada, angular-scroll-glue yönergesini kullanarak working plunker adresiniz var.

Buradaki anahtar, md-content ürününüze scroll-glue-right yönergesini ekliyor.

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

tam kod here

EDIT bakınız: programlama yoluyla yerine otomatik olarak ilk plunker olduğu gibi, bir denetleyici özniteliği için scroll-glue-right bağlayabilir kaydırmak istiyoruz edin. Örnek:

glued true olarak ayarlanır

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

, kaydırma kovulacak. Çalışma plunker here

o

Answer 2

Eğer scrollLeft baktınız mı olur Umut? Sen kaydırılan öğenin konumunu almak ve sonra bu pozisyona ebeveyn ilerleyebilirsiniz: Eğer gerekirse

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

Kesinlikle bir direktif içine bu inşa edebileceğini, ya da sadece size ekledikten sonra böyle bir şey çalıştırabilirsiniz bir sütun.

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>