Page 50 - JavaScript修炼之道
P. 50
38 第三部分 UI技巧
任务 17 在载入内容时保持显示区域
有时，你可能希望保持用户的显示区域（也就是在浏览器窗口中可见的所有东西）固定不变，
哪怕是用户单击链接以在其上载入更多内容的时候。比如，用户单击查看前面的评论，你不会希
望在上面载入评论之后用户的滚动位置就被推到下面去了吧。
这时，你会发现遇到了一点小障碍。感觉上用户应该是期望他们的页面位置没有变化。但是
在上面载入内容时，你又必定会把文档的其余内容，包括被单击的那个地方，向显示区域下方推，
而且很可能推到了显示区域之外。
解决办法是，保持相对于显示区域的滚动位置。要做到这一点，我们需要获取显示区域的
“滚动偏移”，即在当前显示部分上方载入内容前显示区域的滚动位置，然后在载入内容之后恢复
这个偏移。计算偏移非常麻烦，到处纠缠着跨浏览器的问题，好在Prototype等JS库提供了位置相
关的功能来解决这个问题。
①
右页的代码改写自Sam Stephenson的Gist 。在载入更多内容前，我们先获取触发链接在整个
文档中的位置（也就是它的cumulativeOffset()），然后从中减去显示区域的当前滚动位置，
就得到这个触发链接在显示区域中的出现离区域顶端的距离。新内容载入后，用这个减法的逆
过程就能计算出显示区域的新偏移值。
熟悉Prototype的读者也许会奇怪为什么我这里用的是Ajax.Request，而没有用到更具体的
Ajax.Updater。这是因为用Ajax.Request可以尽可能地推迟获得原来的滚动位置的时间，即在
Ajax请求完成之后再获得。这样即使遇到用户在Ajax请求等待期间滚动了页面，也可以避免出
现诡异的“滚动复位”效果。
这样一来，只需通过很少的代码就实现了相当不错的用户体验。
——————————
① github的代码片段粘贴服务，该Gist位于https://gist.github.com/134653。*
