horizontally scroll table in Angular md

In Angular 1.5 I have a table in an <md-content> . I dynamically add columns to the table, and at a certain point horizontal scrollbars appear. This is good.

But the bad part is that the new columns are not visible. How could I programmatically scroll my <md-content> horizontally so that new columns are visible?

---

As I post in a comment, here you have a working plunker using angular-scroll-glue directive.

The key here is attaching scroll-glue-right directive to your md-content .

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

See complete code here

EDIT : If you want to scroll programatically instead of automatically like in the first plunker, you can bind scroll-glue-right to a controller attribute. Example:

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

When glued is set to true , scroll will be fired. Working plunker here

Hope it helps

---

Have you looked into scrollLeft ? You can get the position of the scrolled element, and then scroll the parent to that position:

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

You could certainly build this into a directive if you needed to, or you can just run something like this after you add a column. Here's a quick 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>

链接地址: http://www.djcxy.com/p/94772.html

上一篇: 拉动前重置为状态

下一篇: 在Angular md中水平滚动表格