全屏阅读掘金文章

先看一下效果。实现无干扰，全屏阅读掘金文章。

使用api Element.requestFullscreen()

可以令浏览器将指定的元素设置为全屏模式，隐去屏幕上的其它所有UI元素及其它应用。

返回值是一个Promise，并在全屏模式激活后变为resolved状态。

将掘金文章页文章内容设置为全屏

审查一下文章内容的dom节点，先拿到它。

const articleArea = document.querySelector('.article-area');
articleArea.requestFullscreen();

就两行代码搞定。并且会提示按Esc键退出全屏。

此时会发现页面无法滚动，因为文章内容的容器没有设置可以滑动。

可以通过Element.onfullscreenchange事件监听元素进入或退出全屏。

通过document.fullscreenElement来拿到进入全屏的元素，退出全屏后获取为null。

articleArea.onfullscreenchange = e => {
  // 无法通过e来判断
  const target = document.fullscreenElement;
  articleArea.style.overflow = target ? 'auto' : '';
};

到这，就已经完成了需要的全屏阅读效果。

其它

查看进入全屏的dom节点。

top-layer会有一些样式。

点击top-layer，会定位到底部，有这样一个在html之外的结构。