IE借鑑SVG向後滾動上

Question

我一直在滾動，並使用jQuery和JS在此筆由Ben Laley繪製SVG路徑，如：http://codepen.io/paintbycode/pen/JDbcF

它適用於Chrome和Firefox，但IE瀏覽器似乎是向後播放我的動畫，我找不出原因。

我使用的是與codepen示例中相同的js代碼，也使用了jQuery。 （我非常新的JS，對格式不正確的代碼道歉）

<script> 
$(document).ready(function() { 
    var $dashOffset = $(".all").css("stroke-dashoffset"); 
    $(window).scroll(function() { 
    var $percentageComplete = (($(window).scrollTop()/($("html").height()  - 

$(window).height())) * 100); 
    var $newUnit = parseInt($dashOffset, 10); 
    var $offsetUnit = $percentageComplete * ($newUnit/100); 
    $(".all").css("stroke-dashoffset", $newUnit - $offsetUnit); 
    }); 
}); 

Answer 1

好了，所以這段代碼解決了這個問題：

<script> 
$(document).ready(function() { 
    var $dashOffset = $(".all").css("stroke-dashoffset"); 
    $(window).scroll(function() { 
    var $percentageComplete = (($(window).scrollTop()/
($(document).height() + $(window).height())) * 100); 
    var $newUnit = parseInt($dashOffset, 10); 
    var $offsetUnit = $percentageComplete * ($newUnit/100); 
    $(".all").css("stroke-dashoffset", $newUnit - $offsetUnit); 
    }); 
}); 
</script> 

基本上，這條線：

var $percentageComplete = (($(window).scrollTop()/($("html").height() - 
$(window).height())) * 100); 

被替換爲：

var $percentageComplete = (($(window).scrollTop()/
($(document).height() + $(window).height())) * 100); 

我希望這對你們有意義，我仍然在弄糊塗發生了什麼事情。

Answer 2

這是一個在svg中流行的滾動筆畫的例子。

var svg = document.getElementById("woman"); 
 

 
var path = svg.getElementsByTagName('path'); 
 

 
function scrollOn(percentage) { 
 
    for (var i = 0; i < path.length; i++) { 
 
    var length = path[i].getTotalLength(); 
 
    var amount = length * percentage; 
 
    //console.log(amount); 
 
    path[i].setAttribute("style", "stroke-dashoffset:" + amount + "; stroke-dasharray: " + length + ";"); 
 
    } 
 
} 
 

 
var viewportHeight = $(document).height() - $(window).height() 
 
$(document).scroll(function() { 
 
    var scrollAmount = $(window).scrollTop(); 
 
    var percentage = 1 - (scrollAmount/viewportHeight) 
 
    scrollOn(percentage); 
 
});

.fil1 { 
 
    fill: none; 
 
    stroke: black; 
 
    stroke-width: 5; 
 
} 
 
#woman { 
 
    height: 100vh; 
 
    position: fixed; 
 
} 
 

 
body { 
 
    height: 5000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg id="woman" viewBox="0 0 1000 1500" xmlns="http://www.w3.org/2000/svg"> 
 
    <path class="fil1" d="M103.108 748.113c-8.40381,-12.7029 -28.2643,-26.1248 -26.1814,-41.2129 8.13333,-58.8938 178.847,-152.415 205.09,-169.696 70.2671,-46.2705 40.3852,-144.601 58.181,-200.727 24.5786,-77.5224 50.0181,-158.041 98.9086,-223.029 33.7371,-44.8462 67.1071,-88.26 141.091,-88.7271 33.7567,-0.212381 81.091,12.4281 113.453,35.8786 16.6367,12.0548 12.1338,30.731 16,50.909 2.98905,15.6052 13.3133,18.1019 14.5424,35.1967 0.741905,10.3257 4.96667,24.4329 3.8981,38.1914 -1.03286,13.3062 -6.91048,27.019 -4.37952,35.9448 4.5319,15.979 30.7724,29.0124 30.061,46.3033 -0.711905,17.2905 -17.2019,10.1952 -19.1524,18.181 -1.95048,7.98619 8.02238,9.89048 7.51524,16.0005 -0.266667,3.21952 -6.77095,4.76905 -8,7.75667 -1.3581,3.3 4.42095,7.86714 3.87905,11.3943 -0.775714,5.05 -7.35476,7.51762 -8.96952,12.3638 -4.2,12.6043 0.108571,30.3852 -10.1824,38.7886 -12.0281,9.82286 -30.381,6.52714 -46.0595,6.30238 -5.25952,-0.0747619 -15.5824,-2.62048 -18.9095,1.45429 -14.5395,17.8029 -20.9457,38.7152 -27.1505,60.8486 -3.84762,13.7248 -3.72238,29.3843 1.45429,42.6662 2.93381,7.5281 15.8224,7.29762 19.3933,14.5457 29.8276,60.5338 50.8371,125.094 79.5148,186.181 5.78476,12.3224 14.639,23.271 22.6676,34.5186 7.43619,10.419 14.1662,21.0952 17.09,33.3605 4.56,19.1238 -2.79333,39.7719 -9.69667,58.1814 -5.03952,13.4395 -21.1267,21.1495 -25.2124,34.9086 -12.0571,40.6024 -14.371,83.4862 -22.3029,125.091 -7.90619,41.471 -25.5376,81.9043 -25.2119,124.12 0.334286,43.2981 15.6948,85.2738 27.1514,127.03 3.17476,11.5705 12.3376,20.7419 16.4843,32 2.7181,7.3781 -1.03429,19.1214 2.42476,26.1819 5,10.2024 14.7752,24.6562 21.7267,36.5324 4.14905,7.08857 5.4219,12.6376 9.25476,17.5405 6.4519,8.25333 10.59,6.00333 15.0786,15.7448 3.65333,7.93048 -1.47524,17.7995 0.97,26.1819 3.49714,11.9867 23.6376,35.7524 11.1514,35.5781 -149.416,-2.09476 -297.22,-1.85905 -451.392,-1.93905 -4.21619,-0.00190476 -9.87619,-20.1152 -13.0086,-28.97 -3.17238,-8.96952 -10.0871,-10.1467 -14.0152,-19.5205 -62.9857,-150.3 31.38,-241.583 83.2667,-304.178 7.16429,-8.6419 -37.9162,-47.3733 -60.121,-67.879 -41.319,-38.1567 -93.411,-64.8714 -129.939,-107.636 -44.5567,-52.1638 -62.3748,-74.9438 -100.363,-132.363z" 
 
    /> 
 
    <path class="fil1" d="M234.636 719.623c3.54524,-11.3395 70.4267,-34.7195 104.242,-61.091 11.1338,-8.68238 7.93762,27.1024 11.6367,40.7271 2.44286,9.00286 -0.248095,33.2443 2.42381,42.181 1.26762,4.23857 7.29714,-10.8205 10.0024,-8.45286 3.66952,3.21238 4.48524,23.4262 9.3919,26.8786 11.6657,8.20952 28.3729,-7.45524 36.3633,4.36238 5.33381,7.8881 2.93571,23.2033 5.98286,32.1105 7.43143,21.721 16.0786,38.9238 21.6533,61.4652 3.46333,14.0033 5.97381,28.299 7.27286,42.6671 1.61619,17.8724 8.75476,37.4252 1.45381,53.8181 -1.65143,3.70714 -7.5619,1.89905 -12.1624,2.65762 -5.75857,0.949524 -10.5681,3.72667 -14.9881,1.22048 -20.7871,-11.7871 -36.3157,-31.2629 -52.3638,-48.969 -23.1533,-25.5457 -43.2495,-54.1957 -64.97,-80.9695 -6.88571,-8.4881 -26.371,-42.7038 -44.8829,-72.8548 -10.9781,-17.8795 -22.2819,-31.829 -21.0557,-35.751z" 
 
    /> 
 
    <path class="fil1" d="M634.633 1261.68c2.76095,-12.1281 6.92,-42.9319 15.5152,-33.94 15.8452,16.5757 21.091,44.5505 15.9995,66.909 -2.40762,10.5767 -19.6557,-10.0981 -27.1505,-17.939 -3.60524,-3.77048 -5.52238,-9.94381 -4.36429,-15.03z" /> 
 
    <path class="fil1" d="M455.727 130.53c-24.5652,16.4852 -58.3595,35.201 -73.6967,49.4548 -22.2171,20.6476 -12.6557,44.5881 -6.30286,69.3333l4.36429 6.30286" /> 
 
</svg>

如何做。 我們爲stroke-dasharray屬性設置了動畫。

長解釋：

1. 查找我們窗口的高度）的$（document）.height（ - $（窗口）.height（）
2. 瞭解當前的滾動：$（窗口） .scrollTop（）;
3. 將其添加到滾動事件：$（文件）.scroll（[...]）
4. 加一百分比（0到1）：（scrollAmount/viewportHeight）
5. 使用這一比例繪製路徑偏移處：東南scrollOn（）
6. 與添加計算行程dashoffset其風格