Html - Can't detect scroll event listener on separate sections

Geoff_S
March 31, 2024
119 views
1 vote
2 Answers

I’m trying to get animations working within their respective divs so that the user scrolling into a div is what triggers it. At the same time, I need to keep a single page type of feel where each div doesn’t have it’s own visibly scrollable area. The problem with this is that I can’t seem to detect scroll events per each div.

i’ve stripped it down to basic code where I just check for the scroll into each section and console log a message so that I can put the animation code in the logs place, but the log doesn’t show anything when scrolling into the areas.

How can I keep the flow of a single page with dynamic content, while allowing for a scroll event on each section?

Code:

  window.addEventListener("scroll", function () {
    // Get the coordinates of the target div
    var sect3 = document.getElementById("section3Wrapper");
    var sect3Top = sect3.getBoundingClientRect().top;
    var path3 = document.querySelector("#vectorPath3");

    // Check if the target div is in the viewport
    if (sect3Top < window.innerHeight && sect3Top + sect3.offsetHeight > 0) {
      console.log("Reached the target div!");

      // Calculate scroll percentage based on target div's height
      let scrollPercentage =
        (window.scrollY - sect3.offsetTop) / sect3.offsetHeight;

      // Calculate draw length based on scroll percentage
      let drawLength = 2268.36 * scrollPercentage * 5; // Total length of the path
      path3.style.strokeDasharray = `${drawLength}, 2268.36`;
      // Perform actions when the target div is reached
    }
  });

#section1Wrapper {
    background-color: black;
  }
  #section2Wrapper {
    background-color: blue;
  }
  #section3Wrapper {
    background-color: red;
  }

<!-- Section 1 -->
<div id="section1Wrapper" class="section-wrapper">
  <svg id="vectorSvg1" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath1"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

<!-- Section 2 -->
<div id="section2Wrapper" class="section-wrapper">
  <svg id="vectorSvg2" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath2"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

<!-- Section 3 -->
<div id="section3Wrapper" class="section-wrapper">
  <svg id="vectorSvg3" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath3"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

Fiddle:
https://jsfiddle.net/h8aq7wvs/2/

Tags: html javascript

Answers

ok if i have this right, you have some div’s in your main page body and would like to know when they scroll into view so that you can perform some action

i believe this does the trick

window.onload=function(){
  
        var wy        = window.scrollY;
        var wh        = window.innerHeight;
        
        var ids       = ['sec1','sec2','sec3'];
        var status    = {};
        
        ids.forEach(chk);

        document.onscroll   = e=>{
          
              wy    = window.scrollY;
              ids.forEach(chk.scroll);
              
        }//onscroll
        
        function chk(id){
        
              var node    = document.querySelector('#'+id);
              var y       = node.offsetTop;
              var h       = node.offsetHeight;
              
              if(y>=wy && y<=wy+wh){
                    status[id]    = true;
                    console.log(id+' start',y,h,wy,wh);
              }
              
        }//chk
        
        chk.scroll=function(id){
          
              var node    = document.querySelector('#'+id);
              var y       = node.offsetTop;
              var h       = node.offsetHeight;
              
              if((y>=wy && y<=wy+wh) || (y+h>=wy && y+h<=wy+wh) || (y<=wy && y+h>=wy+wh)){
                    if(!status[id]){
                          status[id]    = true;
                          console.log(id+' start',y,h,wy,wh);
                    }
              }else{
                    if(status[id]){
                          status[id]    = false;
                          console.log(id+' end',y,h,wy,wh);
                    }
              }
          
        }//scroll
        
}

#sec1 {
  height:500px;
  background:lightgreen;
}
#sec2 {
  height:1000px;
  background:yellow;
}
#sec3 {
  height:2000px;
  background:lightblue;
}

<div id=sec1></div>
<div id=sec2></div>
<div id=sec3></div>

it is designed to work in the body of a webpage, it appears to still work in stackoverflow snippet output iframe but that is an unusual environment in that it has a console built into the webpage body it uses to display the results, that said it does still appear to work

ive also tried to keep this as simple as possible, if you do find shortcomings with it, come find me in the stackoverflow javascript chat and i’ll update it

also note that the onscroll event is a fairly coarse event

jsbin.com/dadafopavo/

Not sure that I completely understood the problem ("cant detect scroll on separate sections") but I think I got what you are trying to achieve.

Below is a generic solution that calculates the scroll percentage of each div based on its top offset and height and sets the corresponding svg path length.

var sect1 = document.getElementById("section1Wrapper");
var sect2 = document.getElementById("section2Wrapper");
var sect3 = document.getElementById("section3Wrapper");

var path1 = document.querySelector("#vectorPath1");
var path2 = document.querySelector("#vectorPath2");
var path3 = document.querySelector("#vectorPath3");

window.addEventListener("scroll", function() {
    setPathLength(path1, sect1)
    setPathLength(path2, sect2)
    setPathLength(path3, sect3)
});

function setPathLength(path, sect){
    let scrollPercentage = getDivScrollPercent(sect)
    let drawLength = 2268.36 * scrollPercentage * 3;
    path.style.strokeDasharray = `${drawLength}, 2268.36`;
}

function getDivScrollPercent(sect){
    let rect = sect.getBoundingClientRect()
    let top = rect.top
    let height = rect.height
    // start calculating the scroll percentage when rect top 
    // is between 0 (reached viewport top and -[div height] (scrolled out of viewport)
    // otherwise return 0
    if (top > 0 || top < -height) return 0
    return -top / height
}

#section1Wrapper {
  background-color: black;
}

#section2Wrapper {
  background-color: blue;
}

#section3Wrapper {
  background-color: red;
}

<!-- Section 1 -->
<div id="section1Wrapper" class="section-wrapper">
  <svg id="vectorSvg1" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath1"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

<!-- Section 2 -->
<div id="section2Wrapper" class="section-wrapper">
  <svg id="vectorSvg2" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath2"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

<!-- Section 3 -->
<div id="section3Wrapper" class="section-wrapper">
  <svg id="vectorSvg3" viewBox="0 0 697.25 2268.36">
    <defs>
      <style>
        .teamcls {
          fill: none;
          stroke: #062334;
          stroke-miterlimit: 10;
          stroke-width: 50px;
        }
      </style>
    </defs>
    <path
      id="vectorPath3"
      class="teamcls"
      stroke-dasharray="0, 2268.36"
      d="M342.83 1.82 344.13 19.65 347.34 37.48 345.89 55.3 343.33 73.13 343.85 90.96 345.03 108.79 347.09 126.62 344.45 144.44 346.41 162.27 343.96 180.1 343.2 197.93 345.92 215.76 345.9 233.59 343.27 251.42 344.04 269.25 344.72 287.07 342.87 304.9 345.91 322.73 346.47 340.56 343.31 358.39 342.84 376.22 346.05 394.05 347.09 411.88 344.31 429.72 344.18 447.55 345.36 465.39 346.38 483.23 349.02 501.39 356.64 517.96 365.48 534.55 382.07 543.39 398.47 551.62 416.8 555.01 434.47 553.01 452.14 555.47 469.81 555.28 487.48 554.78 505.15 557.22 522.82 553.21 540.49 556.4 558.17 553.08 575.84 554.72 593.52 555.81 612.38 556.55 629.48 564.64 643.34 577.11 654.07 591.98 664.41 607.94 664.85 626.93 667.68 644.21 664.2 661.5 665.75 678.79 665.8 696.09 663.49 713.38 664.57 732.42 655.48 749.15 643.69 763.55 629.93 776.44 611.8 781.61 593.52 783.13 575.22 786.3 556.93 786.81 538.63 782.92 520.33 785.01 502.04 787.05 483.74 784.69 465.44 786.81 447.14 787.1 428.85 786.72 410.55 787.47 392.25 784.29 373.95 786.59 355.65 783.57 337.35 786.04 319.06 785.03 300.76 783.54 282.46 783.19 264.16 786.56 245.86 784.34 227.56 784.26 209.26 782.96 190.96 783.35 172.66 787.45 154.36 785.96 136.06 783.88 117.75 784.03 99.44 786.87 80.85 787.7 63.01 793.98 49.09 806.73 35.65 820.25 30.65 838.65 29.43 857.08 27.11 874.39 26.95 891.71 25.24 909.02 28.55 926.33 27.89 943.65 27.72 960.96 26.32 978.28 29.84 995.6 30.23 1014.15 37.55 1031.34 48.64 1046.4 63.54 1057.79 80.56 1066.06 99.44 1068.51 117.74 1065.99 136.03 1066.93 154.33 1065.5 172.63 1069.57 190.92 1067.69 209.22 1065.98 227.52 1066.37 245.82 1069.58 264.12 1068.85 282.41 1066.61 300.71 1069.11 319.01 1069.69 337.31 1068.27 355.61 1069.21 373.91 1069.95 392.2 1068.24 410.5 1066.38 428.8 1065.83 447.1 1068.21 465.4 1067.81 483.7 1066.48 502 1068.88 520.3 1068.24 538.6 1068.14 556.91 1067.8 575.21 1068.07 593.52 1067.28 612.32 1069.13 629.3 1077.33 645.19 1087.63 657.66 1102.27 664.46 1120.3 664.54 1139.31 666.07 1157.02 667.74 1174.73 663.62 1192.44 664.23 1210.15 664.43 1227.86 663.14 1245.57 663.1 1263.29 663.76 1281.16 671.05 1298.69 666.49 1317.99 661.07 1336.01 649.02 1350.49 634.49 1363.07 615.71 1367.36 596.91 1372.99 578.62 1371.37 560.32 1370.28 542.03 1369.25 523.73 1369.98 505.43 1369.63 487.13 1371.2 468.84 1370.65 450.54 1369.87 432.24 1370.01 413.94 1372.64 395.64 1372.85 377.34 1369.37 359.05 1369.09 340.75 1371.39 322.45 1372.93 304.16 1369.27 285.86 1371.18 267.56 1369.37 249.26 1371.75 230.96 1373.29 212.66 1370.01 194.36 1369.28 176.06 1369.59 157.76 1370.43 139.45 1370.49 121.14 1371.34 102.84 1372.78 83.77 1371.59 68 1382.42 51.83 1391.76 40.08 1406.53 31.32 1423.6 31.21 1442.76 32.06 1460.08 31.78 1477.39 32.43 1494.7 33.48 1512.01 32.22 1529.33 30.3 1546.65 30.7 1563.97 32.64 1581.29 33.56 1599.85 42.09 1616.36 51.98 1632.15 67.33 1642.78 84.48 1649.79 102.84 1654.46 121.13 1652.41 139.43 1654.35 157.73 1652.35 176.02 1651.07 194.32 1652.43 212.62 1652.22 230.92 1651.34 249.21 1654.94 267.51 1651.38 285.81 1651.26 304.11 1653.57 322.41 1654.87 340.71 1652.66 359 1651.3 377.3 1654.89 395.6 1653.12 413.89 1654.83 432.19 1651.17 450.49 1653.41 468.79 1651.13 487.09 1654.28 505.39 1651.57 523.69 1652.05 542 1653.85 560.3 1655.18 578.61 1651.05 596.91 1655.61 616.06 1653.52 632.82 1662.79 648.27 1673.64 659.44 1688.89 667.65 1706.03 669.68 1724.99 667.66 1743.76 670.48 1762.53 670.9 1781.3 670.74 1800.08 671.18 1818.86 670.07 1837.64 668.39 1856.42 665.12 1874.69 659.24 1892.4 648.52 1908.02 632.03 1917.24 615.5 1925.79 596.91 1930.16 578.86 1926.99 560.81 1927.26 542.75 1929.4 524.7 1930.72 506.64 1928.66 488.59 1927.02 470.53 1929.93 452.47 1926.13 434.41 1927.31 416.35 1928.19 398.29 1929.14 380.23 1928.57 364.68 1931.24 356.22 1944.31 351.94 1958.17 348.98 1976.37 351.17 1994.57 348.52 2012.77 352.24 2030.97 350.24 2049.17 352.65 2067.36 348.88 2085.56 348.5 2103.76 349.66 2121.96 348.68 2140.16 350.51 2158.36 350.86 2176.56 349.59 2194.76 348.89 2212.97 349.76 2231.17 349.14 2249.38 349.71 2267.59"
    ></path>
  </svg>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Html – Can't detect scroll event listener on separate sections

Answers