css - 我可以使用 "freeze"仅使用 CSS(或在移动设备上看起来不错的东西)的可滚动 DIV 中的元素吗？

Question

我猜这个问题的答案会是“否”，但这太好了，我还是要问。

我想做的是卡住可滚动 DIV 内的元素，使其垂直放置。这是为了在表中实现卡住行功能。

使用 JavaScript 和绝对定位很容易做到。这是一个容器和三个内部 DIV 的 HTML(实时版本请参见 here):

<div id="container">
  <div id="background">
    Content
  </div>
  <div id="absolutediv">
    Absolute stays inside
  </div>
  <div id="fixeddiv">
    Fixed escapes!
  </div>
  <div id="absolutediv2">
    Stays put!
  </div>
</div>

相关的CSS:

#container {
  position: fixed;
  left: 20px;
  width: 250px;
  height: 250px;
  top: 20px;
  overflow: scroll;
}

#absolutediv {
  position: absolute;
  top: 30px;
  width: 300px;
  background-color: #CEC;
}

#fixeddiv {
  position: fixed;
  top: 100px;
  width: 300px;
  background-color: #ECC;
}

#absolutediv2 {
  position: absolute;
  width: 300px;
  top: 120px;
  background-color: #ECC;
}

以及将#absolutediv2 固定在适当位置的 JavaScript:

var div = document.getElementById('absolutediv2');
var container = document.getElementById('container');

container.addEventListener('scroll', function() {
  div.style.top = container.scrollTop + 120 + 'px';
});

所以#absolutediv2 的行为符合我的要求。但是看看#fixeddiv。这接近我所追求的，我怀疑它在移动设备上看起来更好，因为浏览器可以将它固定在适当的位置而无需等待运行脚本。除了它 (a) 正好越过边界，并且 (b) 不水平滚动。

有什么方法可以用纯 CSS 获得我想要的东西，可以在移动浏览器上运行良好的东西吗？

(在我的页面中，一种方法是将卡住行放在容器 DIV 上方，但卡住行的数量会根据用户滚动到的位置而变化，这意味着容器 DIV 必须移动周围。)

编辑:

总而言之，我想要一个 div:

1. 与其容器一起水平滚动
2. 当容器垂直滚动时保持不动
3. 看起来它属于它的容器
4. 在移动浏览器上看起来不错

最后一个是棘手的一点。我可以使用绝对位置 div 和 JavaScript 实现#1、#2 和#3，但它在移动浏览器上看起来很难看，因为它滞后。使用固定位置的 div，我可以获得 #2 和 #4，我可以用 JavaScript 实现 #1(水平方向上的滞后并没有给我带来太多困扰)，但不是 #3，因为固定位置的 div 突然坐下在其容器顶部。

谷歌对这种事情有一个建议，但这是一个非常极端的解决方案:https://developers.google.com/mobile/articles/webapp_fixed_ui

Answer 1

好的，我还没有对此进行测试，但它应该是正确的。基本上，这使您能够使用我为您创建的 HTML5 数据属性创建多个“贴纸”元素 data-special="sticker" . jQuery 查找这些，然后复制数据并将其附加到另一个 <div>位于原始位置的元素，然后隐藏原始元素。

#container {
    position: fixed;
    left: 20px;
    width: 250px;
    height: 250px;
    top: 20px;
    overflow: scroll;
}

#original-element {
    position: absolute;
    top: 30px;
    width: 300px;
    background-color: #CEC;
}

.sticker {
    position:absolute;
}    

<div id="wrapper">
    <div id="container">
        <div id="background">
           Content
        </div>
        <div id="original-element" data-special="sticker">
           I want to stay put!
        </div>
    </div>
</div>

$("[data-special='sticker']").each(function () {
    $('#wrapper').append(
        $('<div/>').html($(this).html())
                   .addClass("sticker")
                   .css('top', parseInt($('#container').css('top')) + parseInt($(this).css('top')))
                   .css('left', $('#container').css('left'))
                   .css('width', $('#container').css('width'))
                   .css('background-color', $(this).css('background-color'))
    );
    $(this).css('display', "none");
});    

让我知道它是如何为你工作的，还有一个缺点是一旦原始元素被隐藏，它曾经占据的空间就会折叠起来......我会尝试集思广益解决这个问题。

编辑:

更改 JS 以获取 #container宽度而不是原始元素宽度，因为原始元素比容器大。

编辑:

测试:jsfiddle

有些问题是元素随后也会与滚动条重叠，如果您知道滚动条的宽度，则可以从该值中减去 if。

同时检查上面更新的代码。有一些错误...