无需javascript即可设置scrollTop和scrollLeft

Question

我有一个关于scrollTop和scrollLeft属性的问题。我想在不使用JavaScript(jquery)的情况下在我的div中设置这些属性，这可能吗？我的问题是，我有一个解释HTML代码的程序，当程序解释代码时，我滚动的div的值为0。程序无法读取scrollTop或scrollLeft的值。存在一个HTML-tag，如。

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

Answer 1

恐怕只使用CSSHTML是不可能的。

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

我创建了一个能在以下浏览器中工作的解决方案。

• 火狐4+
• Safari 5+
• Chrome 6+
• Opera 11+
• IE 10以上
• 安卓2.3以上

真的有点黑，看你会不会用:)

解释一下

我使用了HTML5属性 autofocus 关于 <input>-字段。由于这将使输入聚焦，它必须将其放到视口中。因此，它将滚动到给定的位置。为了摆脱高亮的轮廓并完全看不到输入，你必须设置一些样式。但这仍然迫使Safari有一个闪烁的像素，所以我用span做了个小技巧，它的作用就像一个覆盖。注意，你不能简单地使用 display: none 因为这不会触发自动对焦（只在Safari中测试过）。

演示

该演示只能在Safari和Chrome浏览器中运行。IE和火狐浏览器似乎不能在自动对焦的情况下启动。<iframe>.

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;
}

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