1 var css = (function () { 2 var doEle = document.documentElement, 3 doBody = document.body, 4 elementScrollLeft, 5 elementScrollTop, 6 utils, 7 offsetLeft, 8 offsetTop, 9 offsetParent; 10 11 utils = { 12 13 // 获取页面的可视宽度和高度 14 getAvailPage: function () { 15 return { 16 width: doEle.clientWidth || doBody.clientWidth, 17 height: doEle.clientHeight || doBody.clientHeight 18 }; 19 20 // 以下是进行||运算的缘由，后几个方法也是如此 21 // if (document.compatMode === 'BackCompat') { // ie6或者没有文档说明下的计算方法 22 // return { 23 // width: doBody.clientWidth, 24 // height: doBody.clientHeight 25 // }; 26 // } else { // document.compatMode == "CSS1Compat"（有文档说明） 27 // return { 28 // width: doEle.clientWidth, 29 // height: doEle.clientHeight 30 // }; 31 // } 32 }, 33 34 // 获取页面的占位宽度和高度 35 getAllPage: function () { 36 return { 37 width: Math.max(doEle.clientWidth || doBody.clientWidth, doEle.scrollWidth || doBody.scrollWidth), 38 height: Math.max(doEle.clientHeight || doBody.clientHeight, doEle.scrollHeight || doBody.scrollHeight) 39 }; 40 }, 41 42 // 获取元素的绝对位置 43 getOffset: function (element) { 44 45 offsetLeft = element.offsetLeft; 46 offsetTop = element.offsetTop; 47 offsetParent = element.offsetParent; 48 49 while (offsetParent) { 50 offsetLeft += offsetParent.offsetLeft; 51 offsetTop += offsetParent.offsetTop; 52 offsetParent = offsetParent.offsetParent; 53 } 54 55 return { 56 top: offsetTop, 57 left: offsetLeft 58 }; 59 }, 60 61 // 获取元素的相对位置 62 getOffsetRelative: function (element) { 63 64 doScrollLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft; 65 doScrollTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop; 66 67 return { 68 top: this.getOffset(element).top - doScrollTop, 69 left: this.getOffset(element).left - doScrollLeft 70 }; 71 }, 72 73 // 是否可见 74 isVisible: function (element) { 75 var left = this.getOffset(element).left, 76 top = this.getOffset(element).top, 77 width = element.offsetWidth, 78 height = element.offsetHeight, 79 docuHeight = this.getAvailPage().height, 80 docuWidth = this.getAvailPage().width, 81 docuLeft = doEle.scrollLeft || window.pageXOffset || doBody.scrollLeft, 82 docuTop = doEle.scrollTop || window.pageYOffset || doBody.scrollTop; 83 84 // 元素下侧超出可视区域上侧 85 // 元素上侧超出可视区域下侧 86 // 元素左侧超出可视区域右侧 87 // 元素右侧超出可视区域左侧 88 if (top + height < docuTop || 89 top > docuTop + docuHeight || 90 left > docuLeft + docuWidth || 91 left + width < docuLeft) { 92 return false; 93 } else { 94 return true; 95 } 96 } 97 }; 98 }; 99 100 return utils;101 102 })();
原标题：js获取页面的可是宽度，占位宽度，获取元素左上角相对页面左上角的位置，页面左上角相对可是区域的位置，元素是否存在于页面可视范围内
关键词：JS
我知道了 