windows / document

一、Windows

浏览器窗口

</script>
    $(document).ready(function () {
        // 内部高（浏览器窗口-工具栏 + 导航栏）
        window.innerHeight;
        // 外部高（浏览器窗口）
        window.outerHeight
    })
</script>


<script>
    $(document).ready(function () {
        // 屏幕高（整个屏幕窗口）
        window.screen.height;
        // 屏幕可利用高（整个屏幕窗口 - 顶部导航栏）
        window.screen.availHeight;
        // 浏览器距离屏幕顶部距离
        window.screenTop;
        // 浏览器距离屏幕左侧距离
        window.screenLeft;
    })
</script>

二、Docment

文档

<script>
    $(document).ready(function () {
        // body
        document.body.clientHeight = content + padding

        // div：无padding，无滚动
        div.clientWidth = style.width

        // div：有padding，有滚动,滚动轴不显示
        div.clientWidth = style.width + style.padding * 2

        // div：有padding，有滚动,滚动轴显示
        div.clientWidth = style.width + style.padding * 2 - 滚动轴宽
    })
</script>


<script>
    $(document).ready(function () {
        // body
        document.body.offsetWidth = content + padding + border

        // 无padding 无滚动 无border
        offsetWidth = style.width

        // 有padding 无滚动 有border
        offsetWidth = clientWidth + border.width * 2

        // 有padding 有滚动且显示 有border
        offsetWidth = clientWidth + border.width * 2 + 滚动轴宽度
    })
</script>


<script>
    $(document).ready(function () {
        // 与其父节点相关，并且各个浏览器处理方式不同，父节点没有设置定位，则以body节点为准
        document.body.offsetLeft;
        document.body.offsetParent;
    })
</script>


<script>
    $(document).ready(function () {
        // 给定宽高小于浏览器窗口：
        document.body.scrollWidth = 浏览器窗口宽高

        // 给定宽高大于浏览器窗口，内容小于给定宽高：
        document.body.scrollHeight = 给定宽高 + padding + margin + border

        // 给定宽高大于浏览器窗口，内容大于给定宽高：
        document.body.scrollHeight = 内容宽高 + padding + margin + border

        // 某个div的scrollWidth，无滚动：
        scrollWidth === style.width + 2 * style.padding

        // 某个div的scrollWidth，有滚动：
        scrollWidth === 实际内容 + 2 * style.padding
    })
</script>


<script>
    $(document).ready(function () {
        // 点击位置距离浏览器左侧
        $.clientX;
        // 点击位置距离浏览器顶部（不包含导航栏+工具栏）
        $.clientY;
        // 点击位置距离元素零点位置
        $.offsetX;
        // 点击位置距离元素零点位置
        $.offsetY;
        // 点击位置距离网页内容顶部距离
        $.pageX;
    })
</script>

可视区域加载

<style>
    .fadein{
       xxxx
    }
</style>
<script>
    $(document).ready(function () {
        window.onscroll = function () {
            // 可视区域
            var clients = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
            // 获取距离浏览器顶部距离
            var divTop = $.getBoundingClientRect().top;
            if (divTop <= clients) {
                // 添加效果
                $.classList.add('fadein');
            }
        }
    })
</script>


<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            var height = $(window).height;
            var scrollTop = $(window).scrollTop;
            var divTop = $.offset().top();
            if (height + scrollTop >= divTop) {
                console.log('');
            }
        })
    })
</script>

页面滚动到顶部/底部

<script>
    $(document).ready(function () {
        window.onscroll = function () {
            // 可视区域
            var clients = window.innerWidth || document.documentElement.clientHeight || document.body.clientHeight;
            // contentoffsize
            var scrollTop = document.body.scrollTop;
            // 内容
            var wholHeight = document.body.scrollHeight;
            if (clients + scrollTop >= wholHeight) {
                console.log('滚动到底部');
            } if (scrollTop == 0) {
                console.log('滚动到顶部');
            }
        };
    })
</script>



<script>
    $(document).ready(function () {
        $(window).scroll(function () {
            // 浏览器高
            var height = $(window).height;
            // 文档内容高
            var wholHeight = $(document).height;
            // offset
            var scrollTop = $(window).scrollTop;
            if (height + scrollTop >= wholHeight) {
                console.log('滚动到底部');
            } if (scrollTop == 0) {
                console.log('滚动到顶部');
            }
        })
    })
</script>

div滚动到底部/顶部

<script>
    $(document).ready(function () {
        function divscroll() {
            // div 内容contensize
            var wholHeight = $.scrollHeight;
            // div contentoffsize
            var scrollTop = $.scrollTop;
            // div 高度
            var divHeight = $.clientHeight;
            if (scrollTop + divHeight >= wholHeight) {
                console.log('滚动到底部');
            } if (scrollTop == 0) {
                console.log('滚动到顶部');
            }
        }

        $.onscroll = divscroll();
    })
</script>

计算滚动轴的宽度

var barWidth =  offsetWidth - clientsWidth

三、windows.location / docment.location

windows.location ===== docment.location