css Question posted in
Some basic documentation can be found here.

Css – MUI Grid – Hide scroll bar, but while still being able to scroll

I’m trying to do exactly the same as this post but with the implementation on a MUI Grid container/item. The result though is that I don’t have a scrollbar and I can’t scroll. Is there something wrong with my implementation?

Here is the codebox

Thanks in advance for your time.

Edit, apparently the links are working so I’m altering this post with both the links and the code.

Links:

  1. Hide scroll bar, but while still being able to scroll
  2. https://codesandbox.io/p/sandbox/scrollable-grid-8jrc3n?file=%2Fsrc%2FScrollableGrid.tsx

Code:

const ScrollableGrid: React.FC = () => {
  return (
    <Grid
      container
      sx={{ overflow: "hidden", maxHeight: "300px", border: "1px solid green" }}
    >
      <Grid
        item
        xs={12}
        sx={{
          overflowY: "auto",
          height: "100%",
          boxSizing: "content-box",
          border: "1px solid red",
          margin: "10px",
        }}
      >
        <div>Text 1</div>
        <br />
        <div>Text 2</div>
        <br />
        <div>Text 3</div>
        <br />
        <div>Text 4</div>
        <br />
        <div>Text 5</div>
        <br />
        <div>Text 6</div>
        <br />
        <div>Text 7</div>
        <br />
        <div>Text 8</div>
        <br />
        <div>Text 9</div>
        <br />
        <div>Text 10</div>
        <br />
        <div>Text 11</div>
        <br />
        <div>Text 12</div>
        <br />
      </Grid>
    </Grid>
  );
};
Tags:

2

Answers


  1. 0

    As my comment worked, I’m adding this for other users.

    You can hide the scrollbar but keep the functionality like so:

    .HideScrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.HideScrollbar::-webkit-scrollbar {
  display: none;
}

    Code Sandbox

    Edit scrollable-grid (forked)

    Login or Signup to reply.
  2. 0

    You can hide the scrollbar by adding the following to index.css or your root CSS file.

    /* Hide scrollbar for Chrome, Safari and Opera */
.example::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.example {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

    And use the CSS classname in your div.

    <div className="example">
  <-- Content goes here -->
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search