在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