版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/rencaishigepi/article/details/86228895
“加载更多”的功能,如果是监听某个dom元素来实现,你会怎么做?
我的设想是:
1、此dom元素要可滚动;
2、判断合适应该做“加载更多”的逻辑;
在我所做的项目中,引用了bootstrap框架,并且这个dom元素隐藏的还比较深。
<body class='enroll-repos'>
<nav class='navbar site-navbar-default'></nav>
<div class='app container'>
<div ng-if="tasks.length" ng-cloak></div>
<div class='row'>
<div id='advCriteria'> </div>
<div class='main col-xs-12' ng-class="{'col-md-9':dirSchemas.length,'col-md-12':dirSchemas.length===0}">
<div id='filterCriteria'></div>
<div id='filterQuick' ng-cloak></div>
<div id='filterTip' class="hidden-xs" ng-if="filter.isFilter||filter.tags.length"></div>
<div id='repos'>
<div class='records'>
这个元素的height才是可能会有10000px;
</div>
</div>
</div>
</div>
</div>
</body>
而我要监听的就是那个 #repos 的DOM元素
每一个父级都设置为height:100%,会造成body也出现滚动条(隐藏滚动条只是一个美观问题,不解决实际问题)。因为body是100%,nav是50px,那底下的div.app.container还是100%的,就会造成body出现滚动条。而我想要div.app.container是100%-50px。
那该如何用css实现上面div根据内容自动高度,下面的div自动铺满剩余高度?
试过了很多种方法,最后只能 flex+许多层 嵌套解决了;
body.enroll-repos {
display: flex;
flex-direction: column;
.app {
flex-grow: 1;
display: flex;
flex-direction: column;
.row {
flex-grow: 1;
display: flex;
.main {
flex-grow: 1;
display: flex;
flex-direction: column;
#repos {
flex-grow: 1;
display: flex;
flex-direction: column;
overflow-y: scroll;
}
}
}
}
}
期待更合适的答案。。。