Question

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

但不好的是，新列不可见。如何以编程方式水平滚动<md-content>以便新列可见？

Answer 1

当我在评论中发帖时，您使用working plunker指令angular-scroll-glue。

此处的关键是将scroll-glue-right指令附加到md-content。

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

查看完整代码 here

编辑：如果您想以编程方式滚动而不是像第一个plunker中那样自动滚动，则可以将scroll-glue-right绑定到控制器属性。例如：

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

当glued设置为true时，将触发滚动。工作人员 here

希望有所帮助

Answer 2

你有没有看过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>

Angular md-content中的水平滚动表

2 个答案: