Css 不使用javascript滚动元素内容

亲爱的各位，有没有一种方法可以在不使用javascript，而只使用CSS的情况下滚动元素的内容（如相对移动元素的内容）

---

如果这很重要，那么所讨论的元素有溢出：hidden和whitespace:nowrap以使其“隐藏”其内容的某些部分。元素通常可以使用javascript滚动，但在初始呈现时（当然，没有进一步的交互滚动）需要正确移动，以防禁用javascript。

否，无法滚动页面上的项目（除非它是包含url哈希部分的iframe，在这种情况下，浏览器将控制滚动的初始位置，而不是css或html）仅使用css和html。

否。不直接使用css

您可以通过使用div包装内容并为其指定所需滚动量的

margintop

值来模拟它

（记住删除它/启用时使用javascript将其设置为0）

更新
杰米在他的书中提到，如果符合你的要求，一个很酷的想法就是

---

更新2

这是我根据杰米的想法创建的另一个解决方案，它不需要框架

下锚

适用于我测试过的所有浏览器（即Chrome、FF、Opera、Safari）
还有另一种方法，非常粗糙，但无需重新加载即可工作

我创建的解决方案在以下浏览器中工作：


火狐4+
狩猎5+
铬6+
歌剧院11+
IE 10+
安卓2.3+

它确实有点黑，所以看看你是否会使用它。：）

一点解释

我在
-字段中使用了HTML5属性
autofocs
。由于这将聚焦输入，因此必须将其放入视口。因此，它将滚动到给定位置。要去除突出显示的轮廓，并且根本看不到输入，必须设置一些样式。但这仍然迫使Safari有一个闪烁的像素，所以我使用了span，它就像一个覆盖层。请注意，您不能简单地使用
display:none
，因为这不会触发自动对焦（仅在Safari中测试过）

演示


演示将仅在Safari和Chrome中运行。IE和Firefox似乎没有在
中启动自动对焦

CSS

div.outer {
    height: 100px;
    width: 100px;
    overflow: auto;
}

div.inner {
    position: relative;
    height: 500px;
    width: 500px;
}

div.inner > input {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 0;
    top: 300px;
    left: 200px;
    border:0;
    outline:0;
}

div.inner > span {
    width: 1px;
    height:1px;
    position: absolute;
    z-index: 1;
    top: 300px;
    left: 200px;
    background: white;
}

HTML

<div class="outer">  
    <div class="inner">
        <input type="text" autofocus></input>
        <span></span>
    </div>
</div>


这确实是一个很酷的想法，但是对于这个特定的案例来说，转向iFrame是一种过度的杀伤力。看起来更酷！这对水平滚动不起作用，是吗？加布，横向思维不错。我从来没有认真推荐任何人使用meta refresh，甚至上面描述的iframes选项，但作为开箱思考的练习，这是一个相当好的ace:）@etranger，如果您已将内容设置为能够水平滚动的方式，它应该可以工作。（简单示例）
<div class="outer">  
    <div class="inner">
        <input type="text" autofocus></input>
        <span></span>
    </div>
</div>