使div可滚动(当它具有ng-repeat时)

时间:2017-02-15 15:14:06

标签: javascript css angularjs scroll overflow

这是我的html代码:

 <div id="header_context" class="scroll">
    <div id="column_scroll" class="column" ng-repeat="column in columns track by column.name" ng-hide="column.name == 'date'" ng-click="column.visible = !column.visible">
        <div class="checkmark" ng-class="{'checked': column.visible}"></div>
        <div class="" ng-bind-html="column.title"></div>
    </div>
</div>

这是我的css:

#column_scroll{
  overflow: scroll;
}
.scroll{
  overflow: scroll !important;
}

这是我在.js中的一个函数:

  $('#timeline_container #content .trips_header').on('contextmenu', function(e) {
    e.preventDefault();
    e.stopPropagation();
    hideContextMenu();
    $('#header_context').css({
        display: 'block',
        left: e.clientX,
        top: e.clientY,
        overflow:scroll
    });
    $('#header_context > div').click(function(evt) {
        evt.stopPropagation();
    });
});

这是我的督察所看到的: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/lPNa4qbS34P6dVE/upload.png

PS:我尝试从检查器溢出更改 - 滚动,但仍然被阻止。我需要添加其他内容吗?

PPS:这是它在PC上的外观或检查员是否关闭: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/b37eCtrQIfgV4dt/upload.png 这是检查员或笔记本电脑的外观: https://s3.amazonaws.com/uploads.hipchat.com/39260/829560/qSquGYY8ZWulHZm/upload.png

如您所见,列表不适合,并且不可滚动。

1 个答案:

答案 0 :(得分:3)

我猜你错过了一些HTML代码。 顺便说一句,如果你想让它可以滚动,div“header_context”或任何包含ng-repeat项目的div必须定义一个height或max-height属性,然后使它成为“overflow-y:滚动;”因此,如果儿童ng-repeat divs height超过父高,则父变为可滚动。