Bảng cuộn theo chiều ngang trong Góc md-content

Question

Trong Góc 1.5 Tôi có một bảng trong một <md-content>. Tôi tự động thêm cột vào bảng và tại một số thanh cuộn ngang xuất hiện. Điều này là tốt.

Nhưng phần xấu là các cột mới không hiển thị. Làm thế nào tôi có thể lập trình cuộn <md-content> theo chiều ngang để các cột mới hiển thị?

Answer 1

Khi tôi đăng trong nhận xét, tại đây bạn có một working plunker sử dụng chỉ thị angular-scroll-glue.

Chìa khóa ở đây là đính kèm scroll-glue-right chỉ thị vào md-content của bạn.

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

Xem mã hoàn chỉnh here

EDIT: Nếu bạn muốn di chuyển programatically thay vì tự động như trong plunker đầu tiên, bạn có thể ràng buộc scroll-glue-right đến một thuộc tính điều khiển. Ví dụ:

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

Khi glued được đặt thành true, cuộn sẽ được kích hoạt. plunker Working here

Hy vọng nó giúp

Answer 2

Các bạn nhìn vào scrollLeft? Bạn có thể có được vị trí của phần tử cuộn, và sau đó di chuyển phụ huynh đến vị trí đó:

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

Bạn chắc chắn có thể xây dựng này vào một chỉ thị nếu bạn cần, hoặc bạn chỉ có thể chạy một cái gì đó như thế này sau khi bạn thêm một cột. Dưới đây là một bản demo nhanh:

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>