Particles.js doesn't continue when I scroll down the page- HTML

Question

So, I made a page in a website, and I used Particles.js for the background. Now, when I scroll down, the particles don't continue down, they stop at the initial corner of the screen, they don't go down if I scroll... these are my particles' settings:

#particles {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-size: cover; background-position: 50% 50% ;background-repeat: no-repeat; }

Here's a pic of the website, as you can see, the white space at the bottom of the page is always like that, the particles don't go there they just bounce back. How can I remove the limit for the size of the website for particles? Thanks!

Answer 1

I am using tsParticals-slim and faced the same problem, then after 20 minutes of debugging, I found the reason,

it was because the configuration was wrapped in a div and z index.

here is the wrong code :

'use client';

import { useCallback } from 'react';
import Particles from 'react-particles';
import { loadSlim } from 'tsparticles-slim';
import type { Engine } from 'tsparticles-engine';

export default function ParticlesBackground() {
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadSlim(engine);
  }, []);

  return (
    <div className="fixed inset-0 -z-10">
      <Particles
        id="tsparticles"
        init={particlesInit}
        options={{
          fullScreen: {
            enable: false
          },
          background: {
            color: {
              value: 'transparent',
            },
          },
          fpsLimit: 120,
          particles: {
            color: {
              value: '#646464',
            },
          links: {
            color: '#646464',
            distance: 15,
            enable: true,
            opacity: 0.2,
            width: 0.5,
          },
          move: {
            enable: true,
            random: false,
            direction: "bottom",
            speed: 1,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 100,
          },
          opacity: {
            value: 0.5,
          },
          shape: {
            type: 'circle',
          },
          size: {
            value: { min: 0.5, max: 2 },
          },
        },
        detectRetina: true,
        interactivity: {
          detectsOn: "window",
          events: {
            onHover: {
              enable: true,
              mode: "bubble"
            },
            onClick: {
              enable: true,
              mode: "push"
            },
            resize: true
          },
          modes: {
            push: {
              quantity: 4
            },
            bubble: {
              distance: 100,
              duration: 0.4,
              opacity: 0.7,
              size: 4
            }
            }
          },
        }}
        className="h-full"
      />
    </div>
  );
}

And here is the correct one :

'use client';

import { useCallback } from 'react';
import Particles from 'react-particles';
import { loadSlim } from 'tsparticles-slim';
import type { Engine } from 'tsparticles-engine';

export default function ParticlesBackground() {
  const particlesInit = useCallback(async (engine: Engine) => {
    await loadSlim(engine);
  }, []);

  return (
    <Particles
      id="tsparticles"
      init={particlesInit}
      options={{
        fullScreen: {
          enable: true,
          zIndex: -10
        },
        background: {
          color: {
            value: 'transparent',
          },
        },
        fpsLimit: 120,
        particles: {
          color: {
            value: '#646464',
          },
          links: {
            color: '#646464',
            distance: 25,
            enable: true,
            opacity: 0.2,
            width: 1,
          },
          move: {
            enable: true,
            random: false,
            direction: "bottom",
            speed: 1,
            straight: false,
          },
          number: {
            density: {
              enable: true,
              area: 800,
            },
            value: 80,
          },
          opacity: {
            value: 0.3,
          },
          shape: {
            type: 'circle',
          },
          size: {
            value: { min: 0.5, max: 2 },
          },
        },
        detectRetina: true,
        interactivity: {
          events: {
            onHover: {
              enable: true,
              mode : 'bubble'
            },
            onClick: {
              enable: true,
              mode: 'push'
            },
            resize: true
          },
          modes: {
            push: {
              quantity: 4
            },
            bubble: {
              distance: 100,
              duration: 0.4,
              opacity: 0.7,
              size: 4
            }
          },
        }
      }}
      className="fixed inset-0"
    />
  );
}

Answer 2

you have written position :absolute ; replace it with position :fixed;