CSS to show only horizontal and vertical scroll bar in div

Overview

When content inside a div exceeds its dimensions, you often need scrollbars to allow users to see the full content. CSS provides the overflow property to control this behavior. Using overflow-x and overflow-y, you can independently control horizontal and vertical scrolling, enabling you to show only the scrollbar you need (horizontal, vertical, both, or none).

1. The overflow Property

The overflow property specifies what happens when content overflows the element box. It can take several values:

• visible: Content is not clipped and may render outside the box (default).
• hidden: Content is clipped, and no scrollbar is provided.
• scroll: Content is clipped, but a scrollbar is always shown (even if not needed).
• auto: Scrollbar is shown only when necessary.

For granular control, use overflow-x and overflow-y to set horizontal and vertical behavior independently.

2. Showing Only Horizontal Scrollbar

To show only a horizontal scrollbar (and hide the vertical one), set overflow-x: auto (or scroll) and overflow-y: hidden. This forces horizontal scrolling while preventing vertical scrolling.

3. Showing Only Vertical Scrollbar

To show only a vertical scrollbar, set overflow-y: auto and overflow-x: hidden. This is common for text-heavy containers where width should be fixed.

4. Showing Both Scrollbars

To show both horizontal and vertical scrollbars when needed, use overflow: auto (or set both x and y to auto). The browser will display scrollbars only when content overflows in the respective direction.

5. Forcing Scrollbars Always Visible

If you want scrollbars to always be visible (even when not needed), use overflow: scroll or set overflow-x: scroll and/or overflow-y: scroll. This is useful for UI consistency but may show scrollbars that are disabled.

6. Practical Use Cases

• Horizontal scroll: Image galleries, tables with many columns, code blocks.
• Vertical scroll: Long text content, comment sections, dropdown menus.
• Both scroll: Data grids, large spreadsheets, interactive dashboards.
• No scroll: When you want to clip content (e.g., modal backgrounds).

7. Scrollbar Styling (Optional)

You can also style the appearance of scrollbars using ::-webkit-scrollbar pseudo-elements (for WebKit-based browsers). This is not standard CSS, but it's widely used for custom design.

8. Browser Support

The overflow-x and overflow-y properties are fully supported in all modern browsers, including Internet Explorer 9 and above. The custom scrollbar styling is mainly for WebKit browsers (Chrome, Safari, Edge) and has limited support in Firefox.

9. Common Mistakes

• Using overflow: hidden when you want scroll: Hidden clips content completely without scrollbars.
• Forgetting to set a fixed height/width: Overflow only works when the container has a defined dimension; otherwise, it expands to fit content.
• Mixing overflow-x and overflow-y incorrectly: Some combinations (like visible with hidden) can have unexpected results; it's safer to use auto, scroll, or hidden consistently.
• Not testing on different devices: Mobile browsers may handle scrollbars differently; always test.

Summary

Controlling scrollbars in a div is straightforward with the overflow properties. By using overflow-x and overflow-y, you can independently show horizontal or vertical scrollbars as needed. Whether you want only horizontal, only vertical, both, or none, CSS gives you the flexibility to design clean, user-friendly containers for any type of content.