在Angular md中水平滚动表格

在Angular 1.5中，我在<md-content>有一个表格。 我动态添加列到表中，并在某一点出现水平滚动条。 这很好。

但不好的部分是新列不可见。 我怎样才能以编程方式水平滚动我的<md-content>以便新列可见？

---

当我发表评论时，在这里你有一个使用angular-scroll-glue指令的工作plunker。

这里的关键是将scroll-glue-right指令附加到你的md-content 。

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

在这里查看完整的代码

编辑 ：如果你想滚动编程，而不是像第一次plunker自动滚动，你可以将scroll-glue-right绑定到控制器属性。 例：

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

当glued设置为true ，滚动将被触发。 在这里工作的朋友

希望能帮助到你

---

你看过scrollLeft吗？ 您可以获取滚动元素的位置，然后将父级滚动到该位置：

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

如果需要的话，你当然可以将它编译成指令，或者你可以在添加一列后直接运行。 这是一个快速演示：

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/94771.html

上一篇: horizontally scroll table in Angular md

下一篇: browser.explore() vs the old ways to debug in Prortractor