Question 232023 in CSS Question posted in
Some basic documentation can be found here.

Targeting horizontal scrollbar with CSS

MacOS hides scrollbars for trackpad users, which results in my users not knowing they can scroll a result set horizontally. I’m trying to use CSS to target the horizontal scrollbars only, so that I can make them permanently visible.

I’m able to override both scrollbar visual behavior with CSS:

::-webkit-scrollbar{
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb{
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

https://jsfiddle.net/ypk62h8v/1/

But when I try to apply the :horizontal pseudo-element, it doesn’t work (Mac/Chrome):

HTML:

<div class="frame" style="">
    <div style="width:500px;height:500px;">
    SCROLLABLE
    </div>
</div>

CSS:

.frame {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

::-webkit-scrollbar:horizontal {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb:horizontal {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

https://jsfiddle.net/ypk62h8v/

Tags:

2

Answers


  1. 0

    There’s no direct CSS selector like :horizontal that you can use to specifically target horizontal scrollbars for customization in the same way you can target scrollbars without specifying orientation.

    So, if you want to achieve this you should use following CSS and JavaScript Code:

    // Add a class to the frame when the content overflows horizontally
const frame = document.querySelector('.frame');
const content = document.querySelector('.content');

frame.addEventListener('scroll', () => {
    if (content.scrollWidth > frame.offsetWidth) {
        frame.classList.add('has-horizontal-scroll');
    } else {
        frame.classList.remove('has-horizontal-scroll');
    }
});
    .frame {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

.frame::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .5);
    box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.frame::-webkit-scrollbar-thumb:vertical {
    background-color: rgba(0, 0, 0, .5); /* Adjust vertical scrollbar appearance */
}


.frame.has-horizontal-scroll::-webkit-scrollbar-thumb:horizontal {
    background-color: rgba(0, 0, 0, .5); /* Adjust horizontal scrollbar appearance */
}
    <div class="frame" style="">
    <div class="content" style="width:500px;height:500px;">
        SCROLLABLE
    </div>
</div>
    Login or Signup to reply.
  2. 0

    I understand that you’re trying to target the horizontal scrollbar specifically using the :horizontal pseudo-element. Unfortunately, as of my knowledge the :horizontal and :vertical pseudo-elements are not supported in webkit-based browsers like Chrome and Safari.

    However, you can still achieve your goal of making the horizontal scrollbar permanently visible by targeting the entire scrollbar area and thumb without using the :horizontal pseudo-element. Here’s how you can modify your CSS to achieve that:

    /* Apply styles to the entire scrollbar area */
::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
    background-color: rgba(0,0,0,.2); /* Set background color */
}

/* Apply styles to the scrollbar thumb */
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

    This will target both horizontal and vertical scrollbars, but it will still make the horizontal scrollbar visible. Unfortunately, there’s no direct pseudo-element targeting for horizontal scrollbars alone in webkit-based browsers.

    To make the horizontal scrollbar permanently visible for a specific element using JavaScript, you can follow these steps:

    // Get the element with class "frame"
const frame = document.querySelector('.frame');

// Add a scroll event listener to the frame
frame.addEventListener('scroll', () => {
    // Check if the current scroll position is at the maximum horizontal scroll
    const isAtMaxScroll = frame.scrollLeft === frame.scrollWidth - frame.clientWidth;

    // If at maximum scroll, apply the custom style to the scrollbar
    if (isAtMaxScroll) {
        frame.style.overflowX = 'scroll';  // Display the horizontal scrollbar
        frame.style.overflowY = 'auto';    // Display the vertical scrollbar
    } else {
        frame.style.overflowX = 'auto';    // Hide the horizontal scrollbar
    }
});
    .frame {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}

.content {
    width: 500px;
    height: 500px;
}
    <div class="frame">
    <div class="content">
        SCROLLABLE
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search