scrollIntoViewIfNeed

上周用户提出了一个体验上的问题：不停地在末尾加单元格，notebook不会自动往下滑，每次都需要手动滑倒底下；另外，如果在一个单元格里写了几十行代码，执行之后的输出结果也有十几行，执行完成之后想看结果也得自己用手滑，这样体验实在是糟心。

随后我马上启动一下Jupyter看看它有没有做处理，试完后发现，它考虑到了这种情况，并且做了相应处理。

我想了想，改善的核心其实就是：保证用户关注的单元格（也就是选中的单元格）在可视范围内。

那么，接下来考虑，用户操作了什么会改变选中的单元格？
首先是加单元格，其次是执行代码。
那么，可以在这两个操作成功之后，判断一下单元的是不是在可视区域，如果不在了那我就设置一下scrollTop让它滑倒一个合适的地方。
问题来了: 如何确定一个元素是否在可视范围内？
看图：

image.png

• 如果cell.offsetTop < notebook.scrollTop, 那么cell在窗口上方不可见；
• 如果cell.offsetTop > notebook.scrollTop + notebook.height(固定高度)，那么cell在窗口下方不可见。
  所以，cell可见的判定条件就是：

notebook.scrollTop < cell.offsetTop < notebook.scrollTop + notebook.height

那么下一步，如果发现不在可视区域内，scrollTop设置为多少呢？
很简单：

notebook.scrollTop = cell.offsetTop

这样cell就能紧紧贴住notebook的顶部，保证它肯定可见。
经过分析与实践，确实是能解决这个问题，但是我总觉得应该有更简单的办法。于是继续google一番，发现了一个HTML5 API-scrollIntoViewIfNeed，如下：

image.png

这个API设置贴心地可以让你设置放到顶部还是放到底部，堪称神器了。
于是立即把我的代码撤下来用上新方法：

this.cell.scrollIntoViewIfNeeded(true);

一行代码搞定，效果妥妥的好。

引申

1. 我想看看这个API里边的实现逻辑是否和我先前的做法一致？如何才能看到这个API的实现代码呢？

2. 我可以自己为DOM订制扩展API吗？

3. offsetTop, offsetLeft, offsetHeight, offsetWidth

   
   image.png

4. clientHeight, clientWidth

   
   image.png

5. scrollTop, scrollLeft

   
   image.png

参考

• [判断元素是否在可视区域]http://www.cnblogs.com/kevinge/p/3937084.html
• [scrollIntoViewIfNeed]https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollIntoViewIfNeeded