Question

我有一个按类型分组的嵌套购物类型列表（并且每个项目都有说明）。

我想要做的是在列表中滚动最后一种类型，直到它滚动到列表顶部。

列表可以声明为

<div id="items">
     <item-type>Type A</item-type>
     <description>a</description>
     <description>b</description>
     <description>c</description>
     <item-type>Type B</item-type>
     <description>d</description>
     <description>e</description>
     <description>f</description>
     <description>g</description>
     <description>h</description>
</div>

我正在使用元素类型，以便我可以在CSS3中使用#items > item-type:last-of-type来选择最后一个元素。

#items {
word-wrap: break-word;
overflow: auto;
height: 100%;
}

#items > * {
    display: block;
}

#items > item-type:last-of-type {
    position:absolute;
    bottom: 100px;   
}

现在唯一的一点是，如何仅使用CSS3（{有效）position: relative; top: 0保持position: absolute; top: 0？

我正在使用FF4和HTML5，所以你可以全力以赴;旧版浏览器不支持此功能。此外，使用calc()也没问题。

有效的视图选项类似于：

______________________________________
Type A            a             Type B 
  a               b               e
  b               c               f
  c             Type B            g
                  d               h
---------------------------------------

线条是可见区域，每列显示给定一定数量的数据（从左到右）的显示方式

Answer 1

如果我正确理解了问题，您需要创建类似iPhone Contacts 列表的内容。查看解决方案someone already built，它使用JavaScript。此外，我已经考虑过它并完成了所有的CSS3规范，但无法确定任何可以在没有JavaScript的情况下实现相同效果的内容。

我敲了一个small demo，但这又使用了JavaScript。我只是觉得纯CSS不可能，但我确信有人会纠正我，如果不是这样的话： - ）

<强> HTML

<div id="items">
    <item-type>Type A</item-type>
    <description>a</description>
    <description>b</description>
    <description>c</description>
    <item-type>Type B</item-type>
    <description>d</description>
    <description>e</description>
    <description>f</description>
    <description>g</description>
    <description>h</description>
    <description>i</description>
    <description>j</description>
    <description>k</description>
    <description>l</description>
</div>

<强> CSS

#items {
    word-wrap: break-word;
    overflow: auto;
    height:100px;
    border:1px dashed red;
    width:200px;
}

#items > * {
    display: block;
}

#items > item-type {
    border:1px dashed blue;
    background-color:#fff;
    width:180px;
}

JavaScript （jQuery 1.6 +）

var itemsTop = $('#items').position().top;
var itemTypeHeight = $('item-type').height();
var itemTypeBottom = itemsTop + itemTypeHeight;

$('#items').scroll(function() {
    $('item-type').each(function() {
        $(this).css({position:''});

        if ($(this).position().top < itemsTop + itemTypeHeight) {
            $(this).css({position:'fixed',top:itemsTop});
        }
    });
});

Answer 2

我认为由于以下原因（可能相关或不相关）是不可能的：

在正常观看时，需要relative个位置;在可见区域的顶部，需要更改为absolute
您可以将calc()和min()或max()与可见高度，当前元素的高度和当前滚动位置一起使用;除了这些计算出的属性都不适用于css
另一个想法是对第二个项目级别进行更多的绝对定位，但是无法参考绝对父级的高度以及绝对祖父母的高度。

我认为第一点是让自己相信这是不可能的最简单的方法。另外两个让我相信，花式css功能和绝对定位的组合也会沉没。

我可以使用CSS3停止元素滚动屏幕吗？

2 个答案: