一、判断元素是否在可视区域内

当前元素在可视区域内： 页面卷去的高度+当前窗口大小>当前元素距离顶部的距离

• 当前元素距离页面顶部的距离：document.getElementById('article').offsetTop;
• 窗口可视大小：window.innerHeight;
• 页面卷去的高度：document.documentElement.scrollTop;

代码示例：

// 当前元素距离顶部的距离
var articleTop = document.getElementById('article').offsetTop;
// 可视区域
var windowHeight = window.innerHeight;
console.log(document.body.clientHeight)
// 卷去的高度
var scrollHeight = document.documentElement.scrollTop;
if(windowHeight + scrollHeight > articleTop){
    document.getElementById('article').style.display = 'block'
}else{
    document.getElementById('article').style.display = 'none'
}

- 网页可见区域宽："+ document.body.clientWidth
- 网页可见区域高："+ document.body.clientHeight
- 网页可见区域宽："+ document.body.offsetWidth(包括边线和滚动条的宽)
- 网页可见区域高："+ document.body.offsetHeight(包括边线的宽)
- 网页正文全文宽："+ document.body.scrollWidth
- 网页正文全文高："+ document.body.scrollHeight
- 网页被卷去的高(ff)："+ document.body.scrollTop
- 网页被卷去的高(ie)："+ document.documentElement.scrollTop
- 网页被卷去的左："+ document.body.scrollLeft
- 网页正文部分上："+ window.screenTop
- 网页正文部分左："+ window.screenLeft
- 屏幕分辨率的高："+ window.screen.height
- 屏幕分辨率的宽："+ window.screen.width
- 屏幕可用工作区高度："+ window.screen.availHeight
- 屏幕可用工作区宽度："+ window.screen.availWidth
- 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"
- 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸

二、浏览器全屏

startScreenFull() {
    var element= document.documentElement
    if (window.ActiveXObject){
        var WsShell = new ActiveXObject('WScript.Shell')
        WsShell.SendKeys('{F11}');
    }
    //HTML W3C 提议
    else if(element.requestFullScreen) {
        element.requestFullScreen();
    }
    //IE11
    else if(element.msRequestFullscreen) {
        element.msRequestFullscreen();
    }
    // Webkit (works in Safari5.1 and Chrome 15)
    else if(element.webkitRequestFullScreen ) {
        element.webkitRequestFullScreen();
    }
    // Firefox (works in nightly)
    else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    }
},
// 退出全屏
exitFull() {
    // 判断各种浏览器，找到正确的方法
    var exitMethod = document.exitFullscreen || //W3C
    document.mozCancelFullScreen || //Chrome等
    document.webkitExitFullscreen || //FireFox
    document.webkitExitFullscreen; //IE11
    if (exitMethod) {
        exitMethod.call(document);
    }
    else if (typeof window.ActiveXObject !== "undefined") {//for Internet Explorer
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
},