Question

我有一个VBox，里面有一些容器元素。 VBox的高度有限，如果其元素超出其高度，则可以滚动。

每个子元素都有一个“标题”元素。在滚动的情况下，我希望标题元素始终可见，即使容器被滚动“剪切”，与iPhone联系人应用程序完全相同（请参阅this question where the behavior is described，我的标题对应于 A ， B 等）。我还有一个底部元素应该表现得相似，坚持画布可见区域的底部。

我一直试图通过监听鼠标事件来检测滚动并手动纠正标题和底部元素的位置来实现这一点：

private function updateTopBottomPosition():void {
    var host:DisplayObjectContainer = owner;

    var global0:Point = host.localToGlobal(new Point(0, 0));
    var global1:Point = host.localToGlobal(new Point(host.width, host.height));

    //transform parent global coordinates to local frame
    var local0:Point = this.globalToLocal(global0);
    var local1:Point = this.globalToLocal(global1);

    var maxTop:Number = this.height;
    var minBottom:Number = this.height; // - topLabel.height

    var top:Number = local0.y;
    top = Math.max(0, top);
    top = Math.min(this.height, top);

    topLocalDistance = top;

    var bottom:Number = this.height - local1.y;
    bottom = Math.max(0, bottom);
    bottom = Math.min(this.height, bottom);

    bottomLocalDistance = bottom;

    if(prevBottomLocalDistance == bottomLocalDistance && topLocalDistance == prevTopLocalDistance)
        return;

    prevBottomLocalDistance = bottomLocalDistance;
    prevTopLocalDistance = topLocalDistance;

    //while there is changes, try again
    setTimeout(updateTopBottomPosition, 1);
}

它确实可以正常工作，我已经上传了完整工作原型 HERE 的源代码。

不幸的是，这种方法的用户体验很糟糕;组件不会流畅地移动，并且定位并不总是正确更新。

我无法找到能够无缝地达到有效效果的组件或方法。如果有人能指出我能够解决这个问题的方向，我将不胜感激。

Answer 1

也许我误解了，但是你不能只使用额外的嵌套布局吗？

container
 - header container
 - vbox with scroller

在VBox中的元素上的粘滞标头

1 个答案: