By

文章目录

最近因为工作的关系不得不拿起可恶的前端，然后很正常的就被各种兼容问题给坑了。在写一个js效果的时候需要获取 scroll Y轴的位置，然后从网上找了一段js脚本来判断这个，后来发现还是没解决兼容问题，可能那段脚本是比较老的，不适应现在的情况。后来在 http://blog.sina.com.cn/s/blog_6d3183b5010140nr.html 这里找到了一张比较全面的浏览器scroll兼容表。 内容如下：

非quirk模式 IE6 7 8 IE9 firefox opera chrome safari
scrollY undefined undefined 正确 正确 正确 正确
pageYOffset undefined 正确 正确 正确 正确 正确
body.scrollTop 0 0 0 0 正确 正确
documentElement.scrollTop 正确 正确 正确 正确 0 0
quirk 模式 IE6 7 8 IE9 firefox opera chrome safari
scrollY undefined undefined 正确 正确 正确 正确
pageYOffset undefined 正确 正确 正确 正确 正确
body.scrollTop 正确 正确 正确 正确 正确 正确
documentElement.scrollTop 0 正确 0 0 0 0

window.pageYOffset 是只读的

根据上面的表写了下面这两个coffeescript函数，测试过IE7-10,firefox,safari,chrome，暂时没发现什么问题。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
# 获取滚动条的位置
getScrollY = ->
if window.pageYOffset == undefined
  # IE6 7 8
  if document.body.scrollTop
  # quick模式
  document.body.scrollTop
  if document.documentElement.scrollTop
  # 非quick模式
  document.documentElement.scrollTop
else
  # 除IE6 7 8以外的所有浏览器
  window.pageYOffset

# 设置滚动条的位置
setScrollY = (y) ->
if window.pageYOffset == undefined
  # IE6 7 8
  # quick模式
  document.body.scrollTop = y
  # 非quick模式
  document.documentElement.scrollTop = y
else
  # 除IE6 7 8以外的所有浏览器
  document.documentElement.scrollTop = y
  document.body.scrollTop = y
文章目录