实时获取手机滚动条高度支持ios

作者: Eason_0cce | 来源:发表于2019-08-05 16:39 被阅读0次

基本使用

/*
参数：
    top : 原始比对高度
    below : 低于原始比对高度回调
    above : 高于原始比对高度回调
    report : 实时汇报高度
*/
function CompareScroll(args){ //滚动条监控
    if(!window.addEventListener){ alert("you can go") }
    var compareTop = args.top || false;
    var canTouch = "ontouchend" in document;
    var delay = args.delay || 50;
    var above = args.above || null;
    var below = args.below || null;
    var report = args.report || null;
    var timer;
    this.init = function(){
        _bindEvent();
        _timeScroll();
        return this;
    }
    this.remove = function(){
        _unbindEVent();
    }
    function _bindEvent(){
        if(canTouch){
            window.addEventListener("touchmove", _scroll , false);
            window.addEventListener("touchend", _timeScroll , false);
        }else{ //如果不支持touch事件
            window.addEventListener("scroll", _scroll , false);
        }
    }
    function _unbindEVent(){
        if(canTouch){
            window.removeEventListener("touchmove", _scroll , false);
            window.removeEventListener("touchend", _timeScroll , false);
        }else{ //如果不支持touch事件
            window.removeEventListener("scroll", _scroll , false);
        }
    }
    function _scrollTo(){
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }
    function _timeScroll(){
        var iniTop = _scrollTo();
        timer  = setTimeout(function(){
            _calculateTop(_scrollTo());
            if(iniTop != _scrollTo()){
                _timeScroll();
            }
        }, delay);
    }
    function _scroll(){ 
        clearTimeout(timer);
        _scroll.ID && clearTimeout(_scroll.ID);
        _scroll.ID = setTimeout(function(){
            _calculateTop(_scrollTo());
        }, delay);
    }
    function _calculateTop(top){
        if(compareTop){
            if(top >= compareTop){
                above && above(top);
            }else{
                below && below(top);
            }
        }
        report && report(top);
    }
}

new CompareScroll({
    top : 70,
    below : function(){
       console.log("当前高度低于:"+70); 
    },
    above : function(){
       console.log("当前高度超过了:"+70); 
    },
    report : function(top){ 
       console.log("当前高度:"+top);
    }
}).init();

一个页面实例

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-type" content="text/html; charset = utf-8">
 <title>Easonyu的监听手机滚动条的例子</title>
 <link rel="shortcut icon" href="/themes/default/favicon.ico" type="image/x-icon">
 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta property="og:image" content="http://aresfield.com/uploads/201802/17cf7aecb46edc6d524c878f75ab2aa2.jpg">
</head>

<body>
<style type="text/css">
.list li { height: 200px; } 
</style>
<div class="menu" id="menu">
    <div style="width: 60px; height: 100%;">
        <a href="http://m.aresfield.com/" class="logo" style="display: flex; align-items: center; justify-content: center; height: 100%">logo</a>
    </div>
    <a href="#team" class="team"><i>团队活动</i></a>
    <a href="#team2" class="team"><i>商务合作</i></a>
    <a href="#team3" class="team"><i>教练团队</i></a>
</div>
<div class="list">
    <ul id="team">
        <li>
            <a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>团队活动</p>
            </a>
        </li>
        <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>团队活动</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>团队活动</p>
            </a>
        </li>
    </ul>   

    <ul id="team2">
        <li>
            <a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>商务</p>
            </a>
        </li>
        <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>商务</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>商务</p>
            </a>
        </li>
    </ul>   


    <ul id="team3">
        <li>
            <a href="https://mp.weixin.qq.com/s/QHPr_oBOiv2olvIOaXZtaw">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/MLrbX5cefjiQY12hoG0C9w">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/7AtJ12wz1XWUiNnFe3HrPw">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/qEWbKw3r1cF6m0xe5-BPDg">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="https://mp.weixin.qq.com/s/9KoawBG_P-B-zdma5eFDow">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/nQvWxrkIlvk66TZwMeHpzA">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>教练</p>
            </a>
        </li>
        <li>
            <a href="http://mp.weixin.qq.com/s/T1aNbvTWrbex89amaorPkg">
                
                <p>教练</p>
            </a>
        </li>
                <li>
            <a href="http://mp.weixin.qq.com/s/J-yVz_Ct4I-zRv_voDh02A">
                
                <p>教练</p>
            </a>
        </li>
    </ul>   
</div>
</body>
<style type="text/css">
* { margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { background: #111; }  
body.active { padding-top: 60px; }
body.active .menu { position: fixed; top: 0; left: 0; }
.menu a.logo { width: 100%; display: block; height: 100%; background-size: auto 70px; }
.menu { height: 60px; display: table; letter-spacing: 2px; text-align: center; box-sizing: border-box; background: #fff; width: 100%; padding-right: 90px; position: relative; }
.menu a { text-decoration: none; box-sizing: border-box; height: 60px; }
.menu a.current { color: red; font-weight: bold; }
.menu a i { width: 40px; display: inline-block; font-style:normal; }
.menu .contact { width: 90px; font-family: arial; height: 60px; padding: 0; padding-top: 12px; box-sizing: border-box; word-break: break-all; display: block; right: 0; top: 0; position: absolute; background: #d07256; color: #fff; font-size: 14px; text-align: center; }
.menu .contact span { font-size: 12px; display: inline-block; padding-top: 4px; letter-spacing: 0.5px }
.menu a { height: 60px; font-size: 16px; padding:0 15px; text-align: left; color: #333; display: table-cell; vertical-align: middle; }
.list { padding:20px; }
.list ul {  overflow:auto; }
.list li { float: left; width: 50%; text-align: center; color: #fff; list-style: none; margin-bottom: 16px; }
.list li a { color: #fff; text-decoration: none; }
.list li img { width: 40vw; height: 26vw; object-fit: cover; }
.list li p { padding:0 4vw; font-size: 14px; line-height: 1.5; text-align: left; height: 63px; text-align: justify; overflow: hidden; }
</style>
<script type="text/javascript">
var positionInfo = [];
window.onload = function(){
    var a_list = document.querySelectorAll("#menu .team");  
    var a_len = a_list.length;
    for(var i = a_len - 1; i > -1; i--){
        var id = a_list[i].getAttribute("href");
        positionInfo.push({
            id : id,
            linker : a_list[i],
            top : getPositionTop(document.querySelector(id)) - 80
        });
    }
}

function getPositionTop(node) {
    var top = node.offsetTop;
    var parent = node.offsetParent;
    while(parent != null) {
        top += parent.offsetTop;
        parent = parent.offsetParent;
    }
    return top;
}

function CompareScroll(args){ //滚动条监控
    if(!window.addEventListener){ alert("you can go") }
    var compareTop = args.top || false;
    var canTouch = "ontouchend" in document;
    var delay = args.delay || 50;
    var above = args.above || null;
    var below = args.below || null;
    var report = args.report || null;
    var timer;
    this.init = function(){
        _bindEvent();
        _timeScroll();
        return this;
    }
    this.remove = function(){
        _unbindEVent();
    }
    function _bindEvent(){
        if(canTouch){
            window.addEventListener("touchmove", _scroll , false);
            window.addEventListener("touchend", _timeScroll , false);
        }else{ //如果不支持touch事件
            window.addEventListener("scroll", _scroll , false);
        }
    }
    function _unbindEVent(){
        if(canTouch){
            window.removeEventListener("touchmove", _scroll , false);
            window.removeEventListener("touchend", _timeScroll , false);
        }else{ //如果不支持touch事件
            window.removeEventListener("scroll", _scroll , false);
        }
    }
    function _scrollTo(){
        return Math.max(document.documentElement.scrollTop, document.body.scrollTop);
    }
    function _timeScroll(){
        var iniTop = _scrollTo();
        timer  = setTimeout(function(){
            _calculateTop(_scrollTo());
            if(iniTop != _scrollTo()){
                _timeScroll();
            }
        }, delay);
    }
    function _scroll(){ 
        clearTimeout(timer);
        _scroll.ID && clearTimeout(_scroll.ID);
        _scroll.ID = setTimeout(function(){
            _calculateTop(_scrollTo());
        }, delay);
    }
    function _calculateTop(top){
        if(compareTop){
            if(top >= compareTop){
                above && above(top);
            }else{
                below && below(top);
            }
        }
        report && report(top);
    }
}
new CompareScroll({
    top : 70,
    below : function(){
        document.body.className = "";
    },
    above : function(){
        document.body.className = "active";
    },
    report : function(top){ 
        var topBreak = false;
        for(var i = 0; i < positionInfo.length; i++){
            if(positionInfo[i].top <= top && !topBreak){
                positionInfo[i].linker.className = "current";
                topBreak = true;
            }else{
                positionInfo[i].linker.className = "";
            }
        }
    }
}).init();
</script>
</html>

特性：
1.解决了ios触碰之后滑动过程不能实时获取滚动条高度的痛点
2.兼容pc跟手机端

实时获取手机滚动条高度支持ios

基本使用

一个页面实例

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读