Question

我一直试图在定义的滚动区域内集成无限。我的UI是一堆内嵌块缩略图（未浮动）。网格布局。

当它占据整个页面宽度时，Infinity在我的页面内完美运行。高度，每个元素都是块级，内部有简单的DOM。

但是当创建一个更高级的UI，带有网格界面，以及在容器内滚动的无限区域（ListView的高度没有定义。它的容器确实如此），那么所有弄错了。甚至更多。如果我100％支付HTML＆amp;身体，无限失败。它计算错误的listView的高度。

如何解决这个问题？网格UI是一个理想的＆amp;常见的一个。

JS Fiddle Demos ：

All 1300 elements are block-level - #OK
ListItem (CSS) Width & Height defined - #OK
ListItem as inline-block - #Broken

代码示例（Infinity NG Integration）

var demoApp = angular.module("demo", []);

demoApp.controller("demoCtrl", function($scope) {
    $scope.items = [];
    for(var i = 0; i < 1300; i++) {
        $scope.items.push({ title: "Item " + i });
    }
});

demoApp.directive("infinityScroll", function() {
    'use strict';
    return {
        restrict: "A",
        transclude: true,
        link: function(scope, elm, $attrs) {
            scope.listView = new infinity.ListView($(elm));
        }
    };
});

demoApp.directive("infinityItem", function() {
    'use strict';
    return {
        restrict: "A",
        link: function(scope, element, attrs) {
            scope.listView.append(element);
        }
    }
});

PostScript：我在API参考中注意到，ListItem有宽度和宽度。高度属性。与ListView相同。我无法找到如何实现它，在构建代码本身内部，我还没有看到如何将这些属性传递给对象。对不起，如果它显而易见的事情，它可能做到这一点。

将不胜感激任何帮助。感谢。

Answer 1

实际上现在我发现了我的问题。实际上与我的UI混淆的2个元素 - 溢出：隐藏我的身体，HTML和高度：页面容器的100％。

我已从页面容器中删除了Overflow：Hidden和Height（而不是ListView！），一切都很好。

＆＃39; useElementScroll：真＆＃39;和.scrollable classname没有帮助我，并阻止我做这个动作。

现在我的用户界面受到了影响，我需要看看我将如何解决它。

修改

我已经在airbnb git上发了一个问题，我希望他们会关注这个问题。无法设置父亲并仅与他有关，这是一个增加复杂性的问题。

https://github.com/airbnb/infinity/issues/46

Infinity.js - 渲染内联块元素的问题＆amp;一个定义高度的爷爷容器

1 个答案: