在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