javascript - 不使用 JavaScript 设置 scrollTop 和 scrollLeft

Question

我对 scrollTop 和 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+
• Chrome 6+
• 歌剧 11+
• IE 10+
• Android 2.3+

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

一点解释

我使用了 HTML5 属性 autofocus在 <input> 上- field 。由于这将聚焦输入，因此必须将其放入视口(viewport)中。因此它将滚动到给定的位置。要摆脱突出显示的轮廓并完全看不到输入，您必须设置一些样式。但这仍然迫使 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>