javascript - 视口(viewport)包不包含滚动条。

问题描述

问 题

高程3 P.198

书上说了innerWidth和innerHeight的值即视口(viewport)大小。

接着又说了document.documentElement.clientWidth和document.documentElement.clientHeight也可以取得视口大小。

那么viewport到底是哪一个值呢？包不包含滚动条的宽度呢？

还有书中这样的代码，显然是把window.innerWidth和document.documentElement.clientWidth当成相同的值处理了

//取得页面视口的大小
var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;
if(typeof pageWidth != "number"){
    if(document.compatMode == "CSS1Compat")
        pageWidth = document.documentElement.clientWidth;
        pageHeight = document.documentElement.clientHeight;
    }else{
        pageWidth = document.body.clientWidth;
        pageHeight = document.body.clientHeight;
    }
}

解决方案

打开控制台发现
window.innerHeight和document.documentElement.clientHeight值相等，都不包括滚动条。
//可能理解错了你的意思，如果说是滚动条本身的宽度的话
console.log(window.innerWidth)
VM160:1 1366
console.log(document.documentElement.clientWidth)
VM168:1 1349
innerWidth是有滚动条宽度的
//
刚才去看了书上的代码
这段代码是适用于混杂模式下的浏览器的，标准模式都保存在innerWidth和innerHeight中
//
视口的宽高是包含滚动条的
innerWidth

这篇关于javascript - 视口(viewport)包不包含滚动条。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！