我可以使用 CSS3 阻止元素滚动到屏幕外吗？答案

【问题标题】：Can I stop an element scrolling off the screen with CSS3?我可以使用 CSS3 阻止元素滚动到屏幕外吗？
【发布时间】：2011-09-11 14:49:02
【问题描述】：

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

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

列表可以声明为

<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
---------------------------------------

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

【问题讨论】：

如果我正确理解您的问题，我认为纯 CSS3 不可能。不过几行 jQuery 就可以工作了。
我不确定我是否理解最终结果应该是什么。你能详细说明一下吗？
您对问题的解释比较混乱，很难清楚地理解您想要实现的目标。我可以看到有一些滚动。但是有没有像ie这样的东西。冻结 Excel 中的列/行，这样它们就不会滚动，但其他一切都可以吗？但是最后的数据不能滚动出视口吗？
我不知道，但也许你可能追求的是position:fixed？
我已经更新了每个阶段的图表。由于第 2 列布局，position:fixed 不是很好；我想看到前面的项目（或尽可能多的），但总是想看到最后一个标题。

标签： html css scroll positioning

【解决方案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});
        }
    });
});

【讨论】：

是的，我会给你打勾:)。我只是回来说这不太可能......
谢谢。有朝一日能看到纯 CSS 解决方案真是太好了！
不知道当 Firefox 谈到放弃最小和最大支持时的可能性有多大（找不到页面 atm :()
是的，我昨天在研究这个答案时读到了这个：-) Bugzilla #363249 和 this thread 进行了相关讨论。

【解决方案2】：

我认为这是不可能的，原因如下（可能相关也可能不相关）：

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

我认为第一点是说服自己不可能的最简单方法。另外两个让我相信花哨的 css 函数和绝对定位的组合也是沉没的。

【讨论】：