Css div element - how to show horizontal scroll bars only?

html

responsive-design

css

scrollbar

byAlex Kataev·Sep 16, 2024

For horizontal scrolling only with CSS, set overflow-x: auto; to activate horizontal scroll when needed, and overflow-y: hidden; to suppress vertical scroll. Add these properties to your div:

.div-horizontal-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  /* Unicorn CSS ahead 🦄 */
}

Then, apply this class in your div in the HTML:

<div class="div-horizontal-scroll">
  <!-- Wide content, like the long tail of a dragon 🐉 -->
</div>

This tactic forces a scrollbar to appear when content overflows the div's width, but the content can extend indefinitely downwards without triggering a vertical scrollbar.

Applying white-space

When dealing with content overflow, the white-space property is a game changer. Setting white-space: nowrap; forces your content into a single line, creating a smoother scrolling experience:

.div-horizontal-scroll {
  white-space: nowrap;
  /* To wrap or not to wrap, that is the question 🎭 */
}

Browser compatibility quirks

In the wild adventure known as front-end development, you'll encounter a creature named browser compatibility. When working with scrollbars, you should arm yourself with knowledge about quirks associated with different browsers:

Internet Explorer may throw a few spanners in the works with its scrollbar behavior. Frustrating, but worry not. Here's a spell for taming the very wild IE8 scrollbar using -ms-overflow-style:

.div-horizontal-scroll {
  -ms-overflow-y: hidden; /* IE8 pied piper 🎶 */
  /* other styles */
}

Legacy browser hacks

Older versions of Internet Explorer (IE 6-7) suffer from antiquated limitations and might rudely ignore CSS3 properties, including ones related to scrollbars. To keep your coder sanity, follow updates from Microsoft that might delightfully tweak older standards, known as pre-CR-standard properties.

Proactive Strategies and Updates

"Prevention is the best cure" - a timeless mantra! So apply forward-thinking to your layouts by avoiding any need for both horizontal and vertical scrollbars. Keep an eye out for browser updates as they often include bug fixes that resolve scrollbar display issues.

Embracing UX with styling

Styling the scrollbar

To optimize your UX, don't forget to unveil the magic wand of CSS for styling your scrollbars:

::-webkit-scrollbar {
  height: 10px; /* scroll magic for horizontal bar */
}

::-webkit-scrollbar-thumb {
  background: gray; /* As visually appealing as this color sounds! */
}

This targets WebKit browsers like Chrome and Safari, ensnaring your scroll area with a visually appealing facelift.

Flexbox: your layout friend

The flexbox layout provides a robust way to handle horizontal content. Set display: flex; to keep items inline and tackle overflow like a knight in shining armor:

.flex-container {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  /* Handle scrolling like a boss 😎 */
}

With flexbox, say goodbye to white-space woes and bask in your content's adaptive responsiveness.

Custom scroll event handlers

Impress users with subtle interactivity by adding JavaScript event listeners:

document.querySelector('.div-horizontal-scroll').addEventListener('scroll', () => {
  // You've moved it, you scroll devil! 😈
  // Add custom behaviour here
});