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

(1/22/15, 11:21), Xidorn Quan wrote:
> 关于你在昨天的会上提出来的
> 
> scroll-position: under-fixed | above-fixed | auto | <length>
> 
> 我觉得 under-fixed 和 above-fixed 可能不太好，因为 fixed 这个用得很广
> 泛，包括在有 sticky 之前的自动固定，还有 Fullscreen 元素和 dialog 一般都
> 是 fixed 的。所以这里以 fixed 作为依据可能带来预期之外的结果。我觉得就一
> 个 <length> 就好了。

'under-fixed' 这种东西主要是解决 Spark 文档那种固定 banner 的情形吧，这
种情形还是比代码导航的 GitHub 情形多一点，要我说的话其实这才最该是 #id
滚动本身的默认行为，只不过现在有这些 hack 了，浏览器应该有兼容性考量不太
愿意改这种地方？

所以对 Web 开发来说，可以考虑把 :target { scroll-position: under-fixed;
} 放在 CSS Reset 里，剩下的再在有特例的页面微调。

至于预期以外的结果我觉得是 Web 开发自己负责了，一个页面里面最多有一个
fixed 或是 sticky 才是常态吧。

> 你给个 auto 让 UA 决定的话，我也不觉得 UA 有什么好的方法能够决定要用什么值……

这是是这样的，其实 HTML 规范到现在还是没有说浏览到 #id [1] 一定要用
CSSOM View 的 scrollIntoView。我想之前贺老也是觉得 'under-fixed' （或是
适当的策略）应该要是默认行为吧，又或其实本来 #id 的滚动就可以考虑多留个
1em 左右的空间，不要直接跟边框边对齐……

不过我也承认浏览器不太可能在这种地方竞争、创新，所以默认值 0 合理点。

另外一种状况是 'under-fixed' 的算法可能也不会有全部人都同意的算法，特别
是 fixed/sticky 没占整个屏幕宽或是其他我没想到的情形，其实 'auto' 的意思
是 “我懒得想完整的意思”…… ;)

[1]
https://html.spec.whatwg.org/multipage/browsers.html#scroll-to-the-fragment-identifier

> 不过这个东西看过去还是蛮有意义的。

之后有空给我们出个 Try Build 试试么 :p？以前讨论 CSS /* */ 注释的时候，
我还有给一个 www-styler Try Build 玩过……

(1/22/15, 12:28), Hawkeyes Wind wrote:
> 昨天会后和kenny又有所讨论，觉得fixed只能使用在页面上只有一个fixed元素的
> 情况，因此又提出一个under(“#banner”)的方式，这里的“#banner”是页面上某元
> 素的ID，且这里只能用ID，因为页面上元素的ID“应该”是唯一的。这么说是因为有
> 些编辑器并不检查元素ID的唯一性。

我可没有说我比较喜欢这种解法哈，只是说（比你说的 'scroll-position:
height(#banner)' 之类的）可行，我觉得 'under-fixed' 比较好还是同一个原
因：“因为这本来该是浏览器的默认行为，所以可以放进 CSS Reset 里”，跟 CSS
Reset 存在的理由有这么点关系吧。

如果是 ID 会不会选到多个元素这种问题，倒是有先例的：Mozilla 的
'background-image: element(#banner)'，[css-images-4] 是说：

  # If multiple elements are matched, the function references the first
  # such element.

也该是这样吧，无所谓。

[2] http://dev.w3.org/csswg/css-images/#element-notation

(1/23/15, 13:28), Justice wrote:
> 用 under/above 的话要怎么处理横向滚动的情况呢？

在这种文件导航的使用情景有横向滚动的情形么？如果只管有实际意义的状况的
话，其实我觉得 'above-fixed' 也可以拿掉……

不过有兴趣的人可以想想怎么把这个提案跟 [css-snappoints][3] 结合起来，说
不定可以有比较一体化的提案，另外就是之前提到的 [cssom-view] 的
ScrollOptions。到底来说，这些都算在 “自定义滚动行为” 的范畴吧。

当然速速把提案加进去之后赶快出结果也可以，别忘了还是有 'position:
sticky' vs. Tab Atkins 的 CSS Positioned Layout（对于不知道这个提案的同
学可以看看[4]，时间又过了三年半了……）的历史教训的。


话说，提一个无关的，貌似 iOS 有 '-webkit-scroll-snap-type'[5]了，不过文
档搜不到，是不是正式的版本没上啊？

[3] http://dev.w3.org/csswg/css-snappoints/
[4] http://lists.w3.org/Archives/Public/public-html-ig-zh/2011Aug/0017
[5] https://bugs.webkit.org/show_bug.cgi?id=134301


以上

Kenny

Received on Friday, 23 January 2015 07:40:15 UTC