这可能不使用javascript吗？答案

【问题标题】：Is this possible without using javascript?这可能不使用javascript吗？
【发布时间】：2014-08-17 13:26:28
【问题描述】：

我使用 JSFiddle 制作了一个简单的 Web UI，我想知道是否可以不使用 JavaScript 制作相同的 UI。

A Fiddle 说了超过 1000 个字。

所以问题是（因为有些人似乎不清楚）：如何在不使用任何 JavaScript 的情况下获得相同的结果？

PS：我不想使用 JavaScript 重新计算每个滚动事件的位置，因为 IE 中的重新定位不够平滑。

HTML：

<div class="A">
    <div class="B">
        B
    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>
</div>

CSS：

.A {
    background-color: yellow;
    height: 400px;
    width: 700px;
    overflow:scroll;
    position: relative;
}

.B {
    background-color: green;
    height: 1000px;
    width: 1500px;
    position: absolute;
    top:0;
    color:white;
}

.C {
    background-color: red;
    position: absolute;
    left: 100px;
    top: 0px;
    height: 1000px;
    width: 100px;
}

JS（使用 jQuery）：

$('.A').scroll(function(e) {
    $('.C').css('left', e.target.scrollLeft + 100);
});

【问题讨论】：

在没有任何 Javascript 的情况下设计它的目的是什么？ position 诡计可能有可能。
听起来很简单，你想要两个容器，container1 真的很高，里面有红色和concopy2，container2 里面有绿色。两者都为给定方向启用了滚动（容器 1 具有垂直滚动，容器 2 具有水平滚动）
您可以让 CSS 轻松地固定/不动。但是“动态”修复了，这样事情就会脱离并开始在某些事件/条件下移动，你需要 JS
@esqew 位置技巧是不可接受的，因为 IE 将其呈现得太滞后。
只需将 C 向左浮动并添加 100px 的边距。还将高度设置为 10%。通过浮动，我正在谈论将其位置设置为绝对。

标签： javascript html css

【解决方案1】：

当有足够多的浏览器支持时，你就可以使用新的sticky position value：

.C {
    position: sticky;
    position: -webkit-sticky;
    left: 100px;
    top: auto; /* Default value */
}

http://jsfiddle.net/5z3nLqq5/12/

【讨论】：

我认为这不是一个好主意：caniuse.com/css-sticky 但我非常感谢您的回答。
如果您要建议类似position: sticky 的内容，您不妨使用top: initial，这样您就不必使用注释对其进行注释。或者更好的是，完全删除它 - 它根本不需要。此外，AFAIK position: sticky 仅在 Mozilla 使用 Aurora 进行了技术演示，我对它在 WebKit/Blink 中的状态一无所知。简单地说“你可以使用它”充其量是误导，最坏的情况是完全错误，而且除非你碰巧在夜间构建，否则演示甚至无法运行这一事实无济于事。
@BoltClock 嗯，我应该在回答之前检查浏览器支持。我认为它会更好，因为我使用的是 Firefox Nightly，所以它已经为我工作了相当长的时间。
我很高兴它来了！
另外，为了记录，如果存在使用当前 CSS 实现的简单方法来做到这一点，他们可能不会费心介绍 position: sticky。

【解决方案2】：

我已经玩过您的示例（仅限 css）并将其置于几乎正确但不够接近 imo 的状态。但是，既然您说它在 IE 中不够流畅，我想向您建议：

var $cRef = $('.C');
$('.A').scroll(function(e) {
 $cRef.css('left', e.target.scrollLeft + 100);
});

IE 的最大问题不是计算慢得多，而是 dom 查询可能非常慢，具体取决于它的版本。缓存 dom 元素可以产生很大的不同。

PS：是的，我知道您正在寻找非 JS 解决方案。但是根据您的推理，这个脚本可能会解决您的问题，而不是最终没有解决方案，因为很难获得适用于所有平台的跨浏览器解决方案。

【讨论】：

不错的方法，但不幸的是 IE (11) 仍然显示滞后。感谢您的努力。
@MemetOlsen 不幸的是，你是对的。尽管在较低版本中它的速度更快，但它仍然落后。（虽然 Chrome 和 FF 完全没有延迟......叹息）。仅使用 CSS 和 HTML 解决这个问题可能非常棘手。

【解决方案3】：

我在 HTML 代码中添加了另一个容器，如下所示：

<div class="container">

    <div class="A">

        <div class="B">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
        </div>

    </div>

    <div class="C">
        This stays fixed when scrolling horizontally, but scrolls along when scrolling down the parent.
    </div>

</div>

然后给 container 类添加一些样式

.container {
    background-color: green;
    height: 400px;
    width: 700px;
    position: absolute;
    top:0;
    overflow-x:hidden;
    overflow-y:scroll;
}

并对 A 和 C 类进行了一些更改。我知道它不是 我们想要的结果，但它与它相似：这是小提琴http://jsfiddle.net/gnfwg08c/

【讨论】：

很遗憾，这是不可接受的，因为水平滚动条在垂直滚动时会上下移动。不错的尝试。

【解决方案4】：

似乎有效：

JsFiddle

为B 添加了一个容器，其宽度为A，但高度为B。如果您不介意B 底部的水平滚动条（您可以使用webkit-scrollbar:JsFiddle 隐藏），则可以使用：/

【讨论】：

感谢您的回答，但结果不一样。我需要用滚动条水平滚动而不滚动到底部才能看到滚动条。