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/
2
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
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.