不使用 JavaScript 设置 scrollTop 和 scrollLeft

Question

我对@9​​87654321@ 和scrollLeft 属性有疑问。我想在不使用 JavaScript (jQuery) 的情况下在我的 div 中设置这些属性。这可能吗？

我的问题是，我有一个解释 HTML 代码的程序，当程序解释代码时，我滚动的 div 的值为零。程序无法读取scrollTop 或scrollLeft 值。存在一个 HTML 标记，例如：

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

Answer 1

恐怕仅使用 CSS/HTML 是不可能的。

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

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

• 火狐4+
• Safari 5+
• 铬 6+
• Opera 11+
• IE 10+
• Android 2.3+

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

一点解释

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

演示

演示将仅在 Safari 和 Chrome 中运行。 IE 和 Firefox 似乎不会在 <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>