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

Issues with the alignment of columns using Bootstrap framework

I've created a design in Photoshop using the Bootstrap 12-column guide, but when I try to implement it using Bootstrap, the results are completely off. https://i.stack.imgur.com/vQwOt.png Here's my HTML code: <!DOCTYPE html> <html lan ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Move Picture with Click (like the action on Google Maps)

Currently on the lookout for some code that will enable me to manipulate a floor plan in a manner reminiscent of the one showcased at whitehouse.gov I am in the process of coding a website that would benefit from integrating a similar function with their ...

jquerycssdhtml

"Enhance your website navigation with the Bootstrap BS3 navbar clc Dropdown-Submenu feature

Utilizing Bootstrap BS3 for the construction of my Django website. I created a dropdown-submenu that is operational on http://www.bootply.com/nZaxpxfiXz# However, when implementing the same in my project, I encountered: The issue is that the dropdown-men ...

jquerycssdjangotwitter-bootstrapdrop-down-menu

Clicking elements reveal but page height remains unchanged?

Clicking on a label within #row-product_id_page-0-0 triggers the display of #row- elements as shown in the code snippet below: $('#row-product_id_page-0-0 label').click(function() { var str = $(this).find('.am-product-title').text ...

javascriptjqueryhtmlcss

What is the best way to show HTML code on a REACT website without disrupting the existing styles?

I am trying to showcase the following code in a REACT webpage, but it is not displaying as code. Instead, it is showing as actual elements. How can I display the button codes below as actual code? <code> <pre> <Button className='btn-grv ...

htmlcssreactjs

Disabling comments is creating problems with the appearance of Wordpress pages

Visit handheldtesting.com Whenever the option "disable comments" is selected in the backend, or if 'display:none:' is added <div id="respond" class="comment-respond" style="display:none;"> to the code, half of the content on the page dis ...

htmlcsswordpress

Triggering a specific outcome with every user interaction involving the selection of an element

How can I trigger this effect each time the user clicks on the element using jQuery? I have added a "ripple" class upon clicking, but when I click on the element for the second time, the effect does not execute because the class has already been added. Ho ...

jqueryhtmlcss

CSS media query that prioritizes styling for large screens over small screens

I am currently working on making my new website development project mobile responsive, but I am encountering some strange behavior that is quite frustrating. I am hoping someone can help me figure out what mistake I may be making here. Whenever I test the ...

cssresponsive-designmedia-queries

What is the best way to define relative paths for content like CSS files?

Whenever I link to a file, I always find myself having to include the entire absolute path like this <link rel="stylesheet" type="text/css" href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" /> I want to simplify it to ...

htmlcss

Utilizing CSS to showcase sub-categories alongside primary categories following PHP rendering

1: In my database I have a hierarchical table of categories: 2: I created a PHP script to convert this table into HTML: 3: The resulting HTML code is as follows: <script> function toggleSubCategories(button) { ...

phpjqueryhtmlcsstwitter-bootstrap

Since updating my background-image, the header images have mysteriously vanished

Currently, I am in the process of building a webpage and want to create a default navigation bar that will be consistent across all pages. Below is the code snippet from the file where I wish to include my navigation bar: <html> <head> < ...

phpcssnavigationincludedefault

Display a div when hovering over a span with custom styling

Don't let the title fool you. http://jsfiddle.net/whb8A/ I'm struggling to style the text inside a span tag within a div. The h3 element shouldn't be nested in the span, but removing it makes it difficult to style with CSS. When hovering ...

csshtml

Bootstrap card elements are failing to display properly, deviating from the expected

My Bootstrap cards are displaying strangely. Instead of having a border, white padding, and a white background like the examples I've seen, mine look like plain text without any styling. Here is an image for reference: https://i.stack.imgur.com/9MsP ...

htmlcsstwitter-bootstraptwitter-bootstrap-3bootstrap-cards

In PowerShell, use the "ConvertTo-Html" commandlet to incorporate

I have a script that retrieves data from a server, converts it to HTML, and then sends the report via email. Here is a snippet of the script: $sourceFile = "log.log" $targetFile = "log.html" $file = Get-Content $sourceFile $fileLine = @() foreach ($Line i ...

htmlcssclasspowershell

"Creating a link to a button with the type of 'submit' in HTML - a step-by-step

Found the solution on this interesting page: In a list, there's a button: <form> <ul> <li> <a href="account.html" class="button"> <button type="submit">Submit</button> ...

htmlcss

Is there a way to recycle an image and ensure that the web browser only needs to download it once?

Is there a way to effectively reuse the same image multiple times on my website without inefficiently downloading it each time? ...

phpjavascripthtmlcssimage

What is the best way to adjust the dimensions of a blank image without altering the size of

I am attempting to set the size of an empty image to 150px. While using float: left works on Firefox, it does not have the same effect on Google Chrome. Here is the HTML code: <div> <img src='some broken url' alt='no image'& ...

htmlcss

The search filter on the bootstrap card failed to display the intended image

When I am searching for a specific image by name, the rest of the row's name keeps showing up. However, I only want to display the data relevant to my search. See the image below: Display: Select all data from the database. <?php $checkQuery = &qu ...

phphtmlcssanimation

Issue in Firefox: Footer is wrapping around the main content

Hey, I've been dealing with a pesky bug that just won't go away. We're currently working on a redesign for www.petpoint.com - The footer looks perfectly fine in every browser except for Firefox. It gets all jumbled up for some reason. I&a ...

jqueryhtmlcssfirefox

Adjusting the image placement within a modal window (using bootstrap 3)

Behold, an example modal: <!-- Large Modal --> <div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg"> <div class="modal-content"> ...

javascriptjqueryhtmlcsstwitter-bootstrap