Question

下面是用于在滚动条上绘制三角形的示例代码。但是我想在三角形部分出现时绘制一个三角形。

请给我一个使用JavaScript代码的解决方案。我该如何解决这个问题？

var triangle = document.getElementById("triangle");
var length = triangle.getTotalLength();

  triangle.style.strokeDasharray = length;

  triangle.style.strokeDashoffset = length;

  window.addEventListener("scroll", myFunction);

  function myFunction() {
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    var draw = length * scrollpercent;
     triangle.style.strokeDashoffset = length - draw;
  }

body {
    height: 2000px;
    background: #f1f1f1;
  }

  #mySVG {
    top: 15%;
    width: 400px;
    height: 210px;
    margin-left:-50px;
  }

<html>
  <body>

  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>

  <svg id="mySVG">
    <path fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" />
    Sorry, your browser does not support inline SVG.
  </svg>

  </body>
</html>

Answer 1

这就是我的处理方式：我将在svg元素上使用scroll事件，而不是使用wheel事件。但粗略地说，这可能不是您所需要的。

在svg元素上使用wheel时，可以滚动到页面上svg元素的位置。然后，您将滑过svg。在svg元素上时，页面不会移动，但三角形会自行绘制。然后，您可以继续滚动页面。

//the SVG element
let svg = document.querySelector("svg");
// the total length of the path
let l = thePath.getTotalLength();
//the initial value for the stroke-dasharray
let dasharray = l;
//the initial value for the stroke-dashoffset
let dashoffset = l;
// styling the path
thePath.style.strokeDasharray = dasharray;
thePath.style.strokeDashoffset = dashoffset;


// on mouse wheel
svg.addEventListener("wheel",(e)=> {
    e.preventDefault();
    if (dashoffset > 0 && e.deltaY > 0 || 
        dashoffset < l && e.deltaY < 0) {
        dashoffset -= e.deltaY;
    }
   if(dashoffset < 0)dashoffset = 0;
   if(dashoffset > l)dashoffset = l;
    
    thePath.style.strokeDashoffset = dashoffset;
  }, false);

body {
    height: 2000px;
    background: #f1f1f1;
  }

  #mySVG {
    top: 15%;
    width: 400px;
    height: 210px;
    margin-left:-50px;
    border:1px solid;
  }

<h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>
  <p>Scroll back up to reverse the drawing.</p>
  <h2>Scroll down this window to draw a triangle.</h2>

  <svg id="mySVG">
    <path id="thePath" fill="none" stroke="red" stroke-width="3" id="triangle" d="M150 0 L75 200 L225 200 Z" />
  </svg>

在滚动时，从头开始绘制三角形，但是在此代码中没有发生

1 个答案: