Question

亲爱的，有没有一种方法可以滚动，就像在相对移动内容一样，没有使用javascript，只使用CSS？

如果这很重要，那么有问题的元素就会溢出：hidden和white-space：nowrap使它“隐藏”其内容的某些部分。该元素通常可以使用javascript滚动，但在初始渲染时需要正确移动（当然，如果禁用了javascript，则无需进一步的交互式滚动）。

Answer 1

不，没有办法在页面上滚动项目（除非是包含网址的哈希部分的iframe，在这种情况下浏览器将仅使用滚动控制滚动的初始定位，而不是css或html） CSS和HTML。

Answer 2

没有。不直接使用CSS。

您可以通过使用div包装内容并为其提供所需滚动量margin-top来模拟它。

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

<强>更新
如果符合您的要求，Jamie会在他的answer中提到一个很酷的想法。

更新2

这是我用Jamie的想法创建的另一个解决方案，它不需要框架。

将锚点<a name="anchor_name">..</a>放在您想要滚动的位置并使用

<meta http-equiv="refresh" content="2;url=#anchor_name_here">

自动滚动。（元素元素应该在（x）html一致性中出现）

示例http://www.jsfiddle.net/gaby/f3CVY/5/

在我测试过的所有浏览器中运行良好（ IE，Chrome，FF，Opera，Safari ）

Answer 3

还有另一种方法 - 这很方便 - 但它可以在没有重新加载的情况下工作。

我创建的解决方案适用于以下浏览器：

Firefox 4 +
Safari 5+
Chrome 6+
Opera 11+
IE 10+
Android 2.3 +

这真的有点hacky，所以看看你是否会使用它。：）

一点解释

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

<强>演示

Try before buy

该演示仅在Safari和Chrome中运行。 IE和Firefox似乎没有在<iframe>中激活自动对焦。

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

不使用javascript滚动元素内容

3 个答案: