How to Make Scrollable div Without Scrollbar?

Creating a scrollable <div> without visible scrollbars can enhance the aesthetics of your web design while maintaining usability. This approach is particularly useful for modals, image galleries, or any content-heavy area where you want a clean look without the distraction of traditional scrollbars.

In this blog post, we’ll explore techniques to achieve this effect using CSS, along with best practices for implementation.

1. Understanding the Overflow Property

The CSS overflow property controls how content is displayed when it overflows the boundaries of an element. The typical values for the overflow property include:

• visible: The overflow is visible outside the element (default).
• hidden: The overflow is clipped, and the content that overflows is not visible.
• scroll: Scrollbars are added to allow scrolling.
• auto: Scrollbars are added only when necessary.

To create a scrollable area without visible scrollbars, you can set the overflow property to hidden and manage scrolling through alternative methods.

2. Creating a Scrollable Div Without Scrollbars

Here’s how to create a scrollable <div> while hiding the scrollbars:

HTML Structure:

<div class="scrollable">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>Proin euismod arcu a nisl tincidunt, sit amet tincidunt nunc varius.</p>
  <p>Curabitur in orci nec sapien egestas bibendum et nec lectus.</p>
  <p>Duis pharetra ligula a magna cursus, non interdum purus feugiat.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  <p>This content is long enough to require scrolling.</p>
  <p>Nulla facilisi. Quisque euismod risus sit amet enim aliquam blandit.</p>
  <p>Duis pharetra ligula a magna cursus, non interdum purus feugiat.</p>
  <p>Praesent feugiat arcu nec libero accumsan, ut consequat urna feugiat.</p>
  <p>Vestibulum faucibus, felis in dignissim hendrerit, velit eros facilisis justo.</p>
</div>

CSS Styles:

.scrollable {
  width: 300px;          /* Set a fixed width */
  height: 200px;         /* Set a fixed height */
  overflow: hidden;      /* Hide the scrollbars */
  position: relative;    /* Establish a positioning context */
}

.scrollable::before {
  content: '';           /* Create a pseudo-element */
  display: block;        /* Make it a block element */
  position: absolute;    /* Position it absolutely */
  top: 0;                /* Align to the top */
  left: 0;               /* Align to the left */
  right: 0;              /* Align to the right */
  bottom: 0;             /* Align to the bottom */
  overflow-y: scroll;    /* Enable vertical scrolling */
  overflow-x: hidden;    /* Hide horizontal overflow */
  pointer-events: none;   /* Prevent pointer events */
}

3. Using CSS Transforms for Smooth Scrolling

Instead of visible scrollbars, you can use CSS transforms to move content within the <div>. However, this approach requires careful management to ensure users can scroll through the content effectively.

Example Implementation:

To enable scrolling with mouse wheel support and touch gestures without displaying scrollbars, you can apply CSS transitions and JavaScript for better interaction:

.scrollable {
  width: 300px;          /* Set a fixed width */
  height: 200px;         /* Set a fixed height */
  overflow: hidden;      /* Hide the scrollbars */
  position: relative;    /* Establish a positioning context */
  touch-action: pan-y;   /* Enable vertical touch scrolling */
}

.scrollable-content {
  position: absolute;     /* Position the content absolutely */
  top: 0;                 /* Align to the top */
  left: 0;                /* Align to the left */
  right: 0;               /* Align to the right */
  bottom: 0;              /* Align to the bottom */
  transition: transform 0.2s ease; /* Smooth transition for scrolling */
}

HTML Structure with Content Wrapper:

<div class="scrollable">
  <div class="scrollable-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>Proin euismod arcu a nisl tincidunt, sit amet tincidunt nunc varius.</p>
    <p>Curabitur in orci nec sapien egestas bibendum et nec lectus.</p>
    <p>Duis pharetra ligula a magna cursus, non interdum purus feugiat.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <p>This content is long enough to require scrolling.</p>
    <p>Nulla facilisi. Quisque euismod risus sit amet enim aliquam blandit.</p>
    <p>Duis pharetra ligula a magna cursus, non interdum purus feugiat.</p>
    <p>Praesent feugiat arcu nec libero accumsan, ut consequat urna feugiat.</p>
    <p>Vestibulum faucibus, felis in dignissim hendrerit, velit eros facilisis justo.</p>
  </div>
</div>

4. JavaScript for Smooth Scrolling

You can enhance the user experience by implementing JavaScript to manage the scrolling behavior without visible scrollbars.

Example JavaScript:

const scrollable = document.querySelector('.scrollable');
const scrollableContent = document.querySelector('.scrollable-content');

scrollable.addEventListener('wheel', (event) => {
  event.preventDefault(); // Prevent default scrolling
  scrollableContent.style.transform = `translateY(${-event.deltaY}px)`; // Move content up/down
});

This script listens for mouse wheel events and adjusts the position of the content within the scrollable <div>.

5. Best Practices for Scrollable Divs Without Scrollbars

1. Usability: Always ensure that users can easily scroll through content without visible scrollbars. Use smooth transitions to enhance the experience.
2. Accessibility: Ensure that your solution is accessible for all users, including those who rely on keyboard navigation or assistive technologies.
3. Touch Support: Implement touch support for mobile users. Consider adding swipe gestures for smooth scrolling.
4. Performance: Test the performance of your implementation across different devices and browsers. Optimize your code to ensure it runs smoothly.
5. Fallback Options: Consider providing fallback options for users who may not have JavaScript enabled. Ensure that critical content is still accessible.

6. Conclusion

Creating a scrollable <div> without visible scrollbars can enhance your web design’s aesthetics while maintaining functionality. By leveraging CSS properties, pseudo-elements, and JavaScript, you can create a seamless scrolling experience that looks polished and modern. Remember to focus on usability, accessibility, and performance to ensure that your solution works well across various devices and browsers. With these techniques, you can effectively manage content overflow and provide a clean, user-friendly interface.