js 滚动条

扫码查看
    <script type="text/javascript">

        //文档高度1016 包含隐藏的margin和padding 实际1000
//文档1000
//窗口高度为530时候, 滚动条 最小0, 最大高度为470 (加上隐藏margin和padding 为486)
//窗口高度为151时候, 滚动条 最小0, 最大高度为849
//窗口高度为200时候, 滚动条 最小0, 最大高度为800
//窗口高度为500时候, 滚动条 最小0, 最大高度为500
//说明1, 文档高度不变 窗口高度越小,滚动条高度越大,
//说明2, 文档高度不变 窗口高度越大,滚动条高度越小,
// 文档高度 - 窗口高度 = 滚动条最大高度(拉到底) //作为一个对象的w和h属性返回视口的尺寸
function getViewportSize(w) {
//使用指定的窗口, 如果不带参数则使用当前窗口
w = w || window; //除了IE8及更早的版本以外,其他浏览器都能用
if (w.innerWidth != null) //能获取当前窗口的宽度(包含滚动条)//当浏览器宽度调整时,这个值也会跟着变化
return { w: w.innerWidth, h: w.innerHeight }; //对标准模式下的IE(或任意浏览器)
var d = w.document;
if (document.compatMode == "CSS1Compat")
return { w: d.documentElement.clientWidth, h: d.documentElement.clientHeight }; //对怪异模式下的浏览器
return { w: d.body.clientWidth, h: d.body.clientHeight };
} window.onscroll = function () {
var t = document.documentElement.scrollTop || document.body.scrollTop;
//文档高度
var documentHeight = document.documentElement.offsetHeight; //文档高度
var viewPortHeight = getViewportSize().h; //窗口高度
var scrollHeight = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || ; //scrollTop 元素垂直滚动条位置
//return documentHeight - viewPortHeight - scrollHeight < 20; console.log("文档高度" + documentHeight);
console.log("窗口高度" + viewPortHeight);
console.log("滚动条高度" + scrollHeight); } </script>
05-11 19:57
查看更多