Are your macOS devices not displaying the Scrollbar CSS buttons correctly?

I need help troubleshooting why my buttons are not appearing in the scrollbar on macOS. They function properly on Windows, so I suspect there may be a typo or error in my code. Can anyone take a look and provide some insight?

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background:#eee;
  border: thin solid lightgray;
  box-shadow: 0px 0px 3px #dfdfdf inset;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:horizontal {
  background:#4B6A89;
  border: thin solid #4B6A89;
  border-radius:10px;
  height: 8px;
}
::-webkit-scrollbar-thumb:vertical {
  background:#A1A7AC;
  border: thin solid #dfdfdf;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
  background:#4B6A89;
}
::-webkit-scrollbar-button:horizontal:increment {
  background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
  background-image: url(http://i.imgur.com/VAvOauT.png);
}
css

Answer №1

In the macOS operating system, the default setting hides the scrollbars. To make them visible, you can use the CSS property display: block;:

::-webkit-scrollbar-button:horizontal:increment {
    display: block;
    background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:decrement {
    display: block;
    background-image: url(http://i.imgur.com/VAvOauT.png);
}

This code snippet provides a practical example by targeting both the :start and :end buttons within one selector to remove duplicate buttons.

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background:#eee;
  border: thin solid lightgray;
  box-shadow: 0px 0px 3px #dfdfdf inset;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:horizontal {
  background:#4B6A89;
  border: thin solid #4B6A89;
  border-radius:10px;
  height: 8px;
}
::-webkit-scrollbar-thumb:vertical {
  background:#A1A7AC;
  border: thin solid #dfdfdf;
  border-radius:10px;
}
::-webkit-scrollbar-thumb:hover {
  background:#4B6A89;
}
::-webkit-scrollbar-button:horizontal:end:increment {
  background-image: url(http://i.imgur.com/rwmYdPk.png);
}
::-webkit-scrollbar-button:horizontal:start:decrement {
  background-image: url(http://i.imgur.com/VAvOauT.png);
}
::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement {
  display: block;
}

# Working Example (requires supported browser):
<div style="width: 200px; height: 200px; overflow: auto;">
  <p style="width: 150%;">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah<p>
</div>

Answer №2

In OSX, the scrollbars lack buttons, which is why you may not find them visible on OSX but can see them on Windows operating systems.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Discovering the root cause of why a particular CSS style is not being implemented correctly

Currently, I am in the process of developing a secondary theme for one of my websites. It's going to be a dark theme. I'm facing an issue where a specific CSS style is not being applied to a particular element, even though it works perfectly fine ...

javascripthtmlcss

Conceal Content from Onsite Search

Is it possible to conceal text from on-page browser searches (e.g. Ctrl+F) in a dependable manner while keeping it visible? I thought that adding aria-hidden="true" would address the issue, but the text remains searchable by browsers. ...

csshtmlwai-aria

Inject CSS styles into panelgrid on-the-fly

How can I pass a color code property fetched from ebean to a css function? <h:panelGrid id="testpanel" columns="#{message.no_of_columns}" rows="#{message.no_of_rows}" styleClass="dynamicGrid"> <c:forEach items="#{bLDashBoar ...

cssjsf

Creating a three-column layout with position fixed in the center

I'm struggling with achieving a maximum width of 400px for the entire set of three columns and centering them. ---------------------------------------------------- | | | |----------------------------- ...

htmlcss

Creating a JavaScript-powered multi-department form: A step-by-step guide

Is there a way to maintain the form displayed on a webpage created in HTML5 and JavaScript for logging calls across three different departments? With buttons assigned to each department, clicking on them reveals the respective HTML form. That said, every t ...

javascripthtmlcss

I can't seem to get my SVG data URL located inside an HTML file within an SVG data URL to display in Chrome

Background I am encountering an issue where an SVG data URL used as a background image property inside an HTML element within a <foreignObject> nested within an SVG data URL is not rendering properly in Google Chrome. If this structure was outside o ...

htmlcssgoogle-chromesvghtml5-canvas

Sidebar navigation text shifting during transition

I attempted to modify the CSS and JavaScript, but unfortunately, it had no effect and actually caused more issues. I adjusted the position and display properties in the CSS, but it seems that wasn't the root of the problem. If anyone could offer assis ...

javascripthtmlcssbootstrap-5

Tips for switching a group of buttons within a userscript by clicking a single button?

Apologies if my wording is not clear, allow me to clarify. I am in the process of developing a userscript that will display a set of buttons below a main button when clicked. These additional buttons will serve different functions and should disappear whe ...

javascripthtmljquerycssuserscripts

Modifying ID styling using JavaScript on Internet Explorer

I need to change the CSS display property from none to block using JavaScript, but only for Internet Explorer. My current code is not working for the ID #backfill-image. <script> function checkForIE() { var userAgent = navigator.userAgent; ...

javascripthtmlcssinternet-explorerdisplay

Adjustable block with excess content

Forgive me if this question seems basic, but I'm not very familiar with CSS. I have a table with two columns that need to be equally sized and responsive when the page is resized. The header isn't an issue since it only contains a few words in ...

htmlcssoverflow

Why does the width of my image appear differently on an iPhone compared to other devices?

I recently encountered an issue with the responsiveness of an image on my website. While it displayed correctly on Android and desktop devices, the image appeared distorted on iPhones as if the CSS width attribute was not applied properly. This problem spe ...

javascriptcssreactjs

"Troubleshooting a CSS Problem in the ADF

I've encountered a serious issue with my ADF Application starting yesterday. Everything was running smoothly until suddenly, I saw this unexpected message in my Jdeveloper Console: < org.apache.myfaces.trinidadinternal.style.util.CSSUtils> < ...

cssoracle-adfjdeveloper

What is the method for adjusting the font size of the label in an Angular mat-checkbox element?

I've been trying to adjust the font size of a mat-checkbox's label, but no matter what I do, the component's default styles keep overriding my changes: Using !important Trying ::ng-deep Applying a global style in styles.scss <mat-checkb ...

cssangularangular-materialangular-forms

Ways to position loading animation in the center and create a lightbox effect for the rest of the page

I have implemented a custom loader in CSS with the following styles: .loader { border: 16px solid #f3f3f3; /* Light grey */ border-top: 16px solid #3498db; /* Blue */ border-radius: 50%; width: 80px; height: 80px; animation: spin 2s linear inf ...

javascripthtmlcssvue.js

Is it possible for me to create a hyperlink that directs to a javascript function?

Here is the code I am currently using: <input class="button" type="button" value="Mark" onClick="doCheck('mark');" \> However, I would like to replace the button with a hyperlink using the <a> tag. Is it possible to achieve ...

javascripthtmlcss

Various web browsers (display: -webkit-inline-box;)

Recently, I encountered an issue with my CSS code: .tudo ul { width: 100%; margin: 0px; display: -webkit-inline-box; } Surprisingly, Mozilla Firefox does not recognize the following line: display: -webkit-inline-box; Is it possible to set d ...

cssbrowser

How to achieve a text border effect using inner glow technique

Can someone help me recreate this unique text design? The font used is Gill Sans MT and the text color is a shade of purple although it may be hard to discern. https://i.sstatic.net/HGrB8.png I have been struggling to achieve the vibrant thick border and ...

css

Is there a way to remove the entire row if I dismiss a bootstrap alert?

Hey there! I'm having a little issue with an alert in a row-fluid. Curious to see? Check out my fiddle. So, when I click the "x" button to dismiss the alert, the row is still visible. Any idea how I can make the entire row disappear when I dismiss it? ...

csstwitter-bootstrap

Having trouble finding two p-col-6 elements side by side in the PrimeNG FlexGrid with Angular?

I have integrated Flex Grid into my Angular7 project. In the initial state, I am able to display two p-col-6 elements side by side without any issues. However, when I try to rearrange them in p-col-12, they no longer align properly. Here is a detailed expl ...

htmlcssangulartwitter-bootstrapprimeng

What could be causing the bootstrap columns to automatically shift onto separate lines?

Check out my code snippet: html, body { width: 100%; height: 100%; margin: 0; padding: 0; overflow-x: hidden; } .row { width: 100%; height: 80%; margin: 0px; padding: 0px; } body { background: #EFEFEF; } .container-fluid { wid ...

htmlcsstwitter-bootstrapbootstrap-5