How to have smooth scroll on full website

[tahonaPL]

Hi, I'm trying to have full body scroll. How to achieve this without fixed height ?

function App() {
  return (
     <Scrollbar
          plugins={{
            overscroll: {
              effect: 'glow',
            },
          }}>
    <div className='App'>
      <div className='list-data' style={{}}>
          {[...Array(20).keys()].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}

      </div>
    </div>
 </Scrollbar>
  );
}```

[nghiepdev]

@tahonaPL To body scroll without fixed height, you can use position: fixed and height: 100vh instead.

[gutovskii]

I added width: 100vw to position: fixed and height: 100vh and it works perfectly 🥳

function App() {
  return (
    <div
      className="App"
      style={{
        display: "flex",
        flexDirection: "column",
        position: "fixed",
        height: "100vh",
        width: "100vw",
      }}
    >
      <Scrollbar
        plugins={{
          overscroll: {
            effect: "glow",
          } as const,
        }}
      >
        <div>
          {[...Array(300).fill(0)].map((value, index) => (
            <div key={index}>{value + index}</div>
          ))}
        </div>
      </Scrollbar>
    </div>
  );
}