SVG линия остановки прокрутки по горизонтали - PullRequest
Новая
       14

SVG линия остановки прокрутки по горизонтали

0 голосов
/ 11 января 2019

Я пытаюсь заставить линию SVG двигаться с помощью прокрутки. Он рисует, когда я прокручиваю страницу вниз, но я хочу, чтобы страница не двигалась, когда рисуется горизонтальная линия, таким образом, она остается в области просмотра, а затем страница продолжает прокручиваться вниз, когда линия опускается.

Я пробовал разные методы рисования SVG, но никто не объясняет, как переходить назад и вперед от фиксированного экрана и прокрутки в зависимости от направления рисования линии.

http://jsfiddle.net/vfcj8s39/

Начните прокрутку в области вывода, чтобы увидеть строку.

HTML: 

<html>
<body>
        <svg xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            width="901.99px" height="5793.99px">
        <path id="line" fill-rule="evenodd"  stroke="rgb(0, 0, 0)"           
         stroke-width="0.66px" stroke-linecap="butt" stroke- 
          linejoin="miter" fill="rgb(255, 255, 255)"stroke- 
          linejoin="miter" fill="rgb(255, 255, 255)"
        d="M450.330,0.330 L450.330,657.330 L11.330,656.330 
        L11.330,1239.330 L900.330,1238.330 L900.330,1889.330 
        L1.330,1889.330 L1.330,2873.330 L795.330,2872.330 
        L795.330,4036.330 L60.330,4035.330 L60.330,4631.330 
        L585.330,4631.330 L584.330,5793.330 "/>
        </svg> 
</body>
</html>

JS: 

<script>
var path = document.querySelector('#line');
var pathLength = path.getTotalLength();

path.style.strokeDasharray = pathLength + ' ' + pathLength;
path.style.strokeDashoffset = pathLength;

window.addEventListener("scroll", function(e) {
    var scrollPercentage = (document.documentElement.scrollTop +             
document.body.scrollTop) /               
(document.documentElement.scrollHeight - 
document.documentElement.clientHeight);

var drawLength = pathLength * scrollPercentage;
path.style.strokeDashoffset = pathLength - drawLength;

});
</script>
...