天天看點
傳回

頁面滾動進度條 ( 相容IE7及以上 )

這是IE的預覽效果，打開的是IE7的文檔模式

頁面滾動進度條 ( 相容IE7及以上 )

直接粘代碼，采用優雅降級的方式實作相容。 demo 中用到的圖檔直接去百度下載下傳就成，下大圖效果好實作。

1、*使用 jquery 的高版本實作

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>touch slide</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        .progress-wraper{
            position: fixed;
            top: ;
            left: ;
            width: %;
            height: px;
            background: rgba(,,,);
        }
        .progress{
            background: greenyellow;
            width: %;
            height: px;
        }
        .content{
            margin-top: px;
        }
        .content img{
            width: %;
        }
    </style>
</head>
<body>
<div class="wraper">
    <div class="progress-wraper">
        <div class="progress"></div>
    </div>
    <div class="content">
        <img src="images/timg-1.jpg" alt="">
        <img src="images/timg-2.jpg" alt="">
        <img src="images/timg-3.jpg" alt="">
        <img src="images/timg-4.jpg" alt="">
        <img src="images/timg-5.jpg" alt="">
    </div>

</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script>
    $(function () {
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        percent(scrollTop);
    });
    function updateProgress(percent) {
        $('.progress').animate({
            width:percent+'%'
        },);
    }
    function percent(top) {
        var conHeight = $('.content').height();
        var bodyHeight = window.innerHeight;
        var percent = (bodyHeight+top)/conHeight*;
        updateProgress(percent);
    }
    window.onscroll = function() {//為了保證相容性，這裡取兩個值，哪個有值取哪一個　　
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        percent(scrollTop);
        //scrollTop就是觸發滾輪事件時滾輪的高度
    }
</script>
</body>
</html>

2、優雅降級 - - 相容 IE7 及以上

相容模式中，将document.ready 進行封裝

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title>touch ie</title>
    <link rel="stylesheet" href="css/common.css">
    <style>
        .progress-wraper{
            position: fixed;
            top: ;
            left: ;
            width: %;
            height: px;
            background: rgba(,,,);
        }
        .progress{
            background: greenyellow;
            height: px;
        }
        .content{
            margin-top: px;
        }
        #content img{
            width: %;
        }
    </style>
</head>
<body>
<div class="wraper">
    <div class="progress-wraper">
        <div class="progress"></div>
    </div>
    <div class="content">
        <img src="images/timg-1.jpg" alt="">
        <img src="images/timg-2.jpg" alt="">
        <img src="images/timg-3.jpg" alt="">
        <img src="images/timg-4.jpg" alt="">
        <img src="images/timg-5.jpg" alt="">
    </div>

</div>
<script src="js/document.ready.js"></script>
<script>
    var progress = document.getElementsByClassName('progress')[];
    var content = document.getElementsByClassName('content')[];
    document.ready(function () {
        var top = document.documentElement.scrollTop || document.body.scrollTop;
        percent(top);
    });
    function updateProgress(width) {
        setTimeout(function () {
           progress.style.width = width+'px';
        },);
    }
    function percent(top) {
        var conHeight = content.offsetHeight;
        var bodyWidth = content.offsetWidth;
        var bodyHeight = window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;
        var progressWidth = (bodyHeight+top)/conHeight*bodyWidth;
        updateProgress(progressWidth);
    }
    window.onscroll = function() {//為了保證相容性，這裡取兩個值，哪個有值取哪一個　　
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        percent(scrollTop);
        //scrollTop就是觸發滾輪事件時滾輪的高度
    }
</script>
</body>
</html>

document.ready.js 代碼如下：

/**
 * Created by Administrator on 2017/6/26.
 */
(function () {
    var ie = !!(window.attachEvent && !window.opera);
    var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$ < );
    var fn = [];
    var run = function () {
        for (var i = ; i < fn.length; i++) fn[i]();
    };
    var d = document;
    d.ready = function (f) {
        if (!ie && !wk && d.addEventListener)
            return d.addEventListener('DOMContentLoaded', f, false);
        if (fn.push(f) > ) return;
        if (ie)
            (function () {
                try {
                    d.documentElement.doScroll('left');
                    run();
                }
                catch (err) {
                    setTimeout(arguments.callee, );
                }
            })();
        else if (wk)
            var t = setInterval(function () {
                if (/^(loaded|complete)$/.test(d.readyState))
                    clearInterval(t), run();
            }, );
    };
})();
JS+ES6+Jquery 相容問題解決 pc端 ie 7 滾動進度條 優雅降級
上一篇: 字元串之KMP算法（C語言）一、KMP算法
下一篇: 3種中成藥，益氣，活血通脈，可改善心髒傳導功能，提升心率，對心動過緩有一定改善作用。1、參松養心膠囊：由人參、麥冬、山茱

繼續閱讀