控制 :target 滚动目标（与行为？）的 CSS 属性（或 JS 方法？）

• From: Kang-Hao（Kenny）Lu（平寿） <kanghao.lkh@alibaba-inc.com>
• Date: Mon, 12 Jan 2015 10:00:11 +0800
• To: W3C HTML5 中文興趣小組 <public-html-ig-zh@w3.org>
• Message-ID: <54B32AAB.3030308@alibaba-inc.com>

我想这事一段时间了，一直没找个空写一下，最近又看了个例子，比如这些官网
Spark 官网：

http://spark.apache.org/docs/latest/graphx-programming-guide.html

点一个标题，第一次的时候会跳到 “正确” 的位置，如果点击第二次同样的链接就
跳不到了，他用的脚本是

function maybeScrollToHash() {
  console.log("HERE");
  if (window.location.hash && $(window.location.hash).length) {
    console.log("HERE2", $(window.location.hash),
$(window.location.hash).offset().top);
    var newTop = $(window.location.hash).offset().top - 57;
    $(window).scrollTop(newTop);
  }
}

监听的是 hashchange，可想而知。这个脚本太可以吐槽了（57 是写死的），另
外，个人认为这个感觉还是比较像是应该用 CSS 解决的，例如：

h2:target {
 scroll-position: under-fixed | above-fixed | auto | <length>
}

之类的？当前 [cssom-view] 有个 'scroll-behavior' [1]，看起来像是决定动态
效果的，而不是最终位置，另外 [cssom-view] 还给 scrollTo/By 加了个
ScrollOptions 参数，感觉相当累赘。还没空想一个一体化的想法，先丢出来看看
有没有人有类似 Spark 官网的例子。

'scroll-behavior' 相关讨论如下[2][3][4]。

[1]
http://dev.w3.org/csswg/cssom-view/#smooth-scrolling:-the-%27scroll-behavior%27-property
[2] http://lists.w3.org/Archives/Public/www-style/2014May/thread#msg255
[3] http://lists.w3.org/Archives/Public/www-style/2014Oct/thread#msg14
[4] http://lists.w3.org/Archives/Public/www-style/2014Dec/thread#msg390



以上

Kenny

Received on Monday, 12 January 2015 02:00:49 UTC