没有javascript设置scrollTop和scrollLeft

Question

我有关于scrollTop和scrollLeft属性的问题.我想在我的div中设置这些属性而不使用JavaScript(jquery).这可能吗？我的问题是,我有一个解释HTML代码的程序,当程序解释代码时,我滚动的div的值为零.程序无法读取scrollTop或scrollLeft值.存在HTML标记,如:

<div scrollLeft="300" scrollTop="200"></div>

Answer 1

我担心这不可能仅使用CSS/HTML.

编辑[05.01.2012] - 一个可能的解决方案

我创建了一个适用于以下浏览器的解决方案:

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

它确实有点hacky,所以看看你是否会使用它.:)

一点解释

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

演示

买前先试试

该演示将仅在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>