<div id="root"></div>

body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}

import React, { useState } from "https://cdn.skypack.dev/react";
import ReactDOM from "https://cdn.skypack.dev/react-dom";

function useScrollTop() {
  const [scrollTop, setScrollTop] = useState(0);
  const onScroll = (event) => setScrollTop(event.target.scrollTop);
  return [scrollTop, { onScroll }];
}

function App() {
  const [scrollTop, scrollProps] = useScrollTop();
  return (
    <div>
      <div
        {...scrollProps}
        style={{
          boxShadow:
            scrollTop > 0 ? "inset 0 8px 5px -5px rgb(0 0 0 / 0.4)" : "none",
          transition: "box-shadow 0.3s",
          height: 100,
          width: 200,
          overflow: "auto",
          border: "1px solid #ccc",
          padding: 20
        }}
      >
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque
        molestiae, quas libero iure recusandae blanditiis corporis laborum,
        neque quidem quod necessitatibus illum laboriosam itaque consequatur
        obcaecati quae architecto hic perferendis! Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Atque molestiae, quas libero iure
        recusandae blanditiis corporis laborum, neque quidem quod necessitatibus
        illum laboriosam itaque consequatur obcaecati quae architecto hic
        perferendis!
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);