Revision history [back]

To make the scroll bar invisible without affecting the ability to scroll in a Material UI Box tag, you can use CSS to hide the scroll bar while still allowing users to scroll. Here's how:

1. First, create a new CSS class for the Box component:

.hide-scrollbar {
  /* your styles here */
}

1. Then, add the following CSS properties to the class to hide the scroll bar:

.hide-scrollbar {
  /* Hide scroll bar */
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  overflow: -moz-scrollbars-none; /* Firefox */
}

/* Hide scroll bar for Webkit browsers */
.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

1. Finally, add the class to your Box component:

<Box className="hide-scrollbar">
  {/* Your content here */}
</Box>

With these CSS styles, the scroll bar will be invisible, but users will still be able to scroll through the content in the Box component.