晴明的博客园 GitHub      CodePen      CodeWars     

[js] 判断滚动条是否滚动到底部 

            var QM = (function() {
                var exports = {};

                function scrollToBottom(func) {
                    /**
                     * @判断是否滚动到底部
                     * @author qingming
                     */
                    var cHeight, sHeight, sTop;
                    if (document.compatMode == "BackCompat") {
                        //主要是为了兼容ie
                        cHeight = document.body.clientHeight;
                        sHeight = document.body.scrollHeight;
                    } else {
                        //document.compatMode == "CSS1Compat"
                        cHeight = document.documentElement.clientHeight;
                        sHeight = document.documentElement.scrollHeight;
                    }
                    //console.log(cHeight);
                    //console.log(sHeight);
                    window.addEventListener("scroll", function(event) {
                        //scrollLeft、scrollTop很不稳定，就算在firefox和chrome之间，也略有差别
                        sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
                        //sTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);
                        //sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
                        //console.log(sTop);
                        sTop = Math.ceil(sTop);
                        //console.log(sTop);
                        //element.scrollHeight - element.scrollTop === element.clientHeight
                        if (sTop + cHeight == sHeight) {
                            func();
                        }
                    });
                }
                exports.scrollToBottom = scrollToBottom;
                return exports;
            })();
//            QM.scrollToBottom(function() {
//                console.log('使用方法')
//            });

 

 

<!DOCTYPE html>
<html lang="zh">

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            html,
            body,
            ul,
            li {
                margin: 0;
                padding: 0;
                border: 0;
                list-style: none;
                overflow: auto;
            }
            
            #a {
                height: 500px;
                display: block;
            }
            
            #b {
                height: 2000px;
                
            }
        </style>
    </head>

    <body>
        <img id='a' src='img/1.jpg' width="100%">
        <div id='b'></div>
        <script>
            var cHeight, sHeight, sTop;
            var a = document.getElementById("a");
            var h = document.getElementById("a").offsetHeight;
            if (document.compatMode == "BackCompat") {
                cHeight = document.body.clientHeight;
                sHeight = document.body.scrollHeight;
            } else {
                cHeight = document.documentElement.clientHeight;
                sHeight = document.documentElement.scrollHeight;
            }
            window.addEventListener("scroll", function(event) {
                sTop = document.documentElement.scrollTop == 0 ? document.body.scrollTop : document.documentElement.scrollTop;
                sTop = Math.ceil(sTop);
                if (sTop > h * 0.5) {
                    a.src = 'img/5.jpg';
                    a.style.transform = 'scale(0.05)';
                } else if (h * 0.38 < sTop && sTop < h * 0.5) {
                    a.src = 'img/4.jpg';
                    a.style.transform = 'scale(0.2)';
                } else if (h * 0.35 < sTop && sTop < h * 0.38) {
                    a.src = 'img/3.jpg';
                    a.style.transform = 'scale(0.28)';
                } else if (h * 0.2 < sTop && sTop < h * 0.35) {
                    a.src = 'img/2.jpg';
                    a.style.transform = 'scale(0.6)';
                } else if (sTop < h * 0.2) {
                    a.src = 'img/1.jpg';
                    a.style.transform = 'scale(1)';
                }
            });
        </script>
    </body>

</html>

 

posted @ 2016-02-26 16:27  晴明桑  阅读(1268)  评论(0)    收藏  举报