Customizing the scroll bar hue on Safari for Lion operating system (OS X 10.7)

Question

Customizing the scroll bar hue on Safari for Lion operating system (OS X 10.7)

In Lion, the new scrollbars in Safari change color based on the background color of the body element. Is there a way to manually control whether the scrollbar is dark or light? I am aware of webkit CSS options to style the scrollbar that existed before the introduction of Lion scrollbars. However, my concern with this method is that the scrollbar no longer behaves like the authentic Lion scrollbar, which fades out after scrolling stops. Although it may be possible to achieve this effect using CSS animations and JavaScript to detect the start and end of scrolling, it would be preferable to use the real scrollbar without any workarounds.

css macos safari osx-lion

Answer 1

Answer №1

For those interested, there is a way to somewhat style the scrollbar in Lion OS X 10.7, although it can be quite tedious. Although Krinkle's fix (or something similar) is probably the best option.

html {
  overflow: auto;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  visibility: hidden; /* does not always work */
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar:window-inactive {
    visibility: hidden;
}

This code mimics Lion's default dark scrollbar as closely as possible. Check out this article for more information on customizing scrollbars in Webkit browsers: http://css-tricks.com/9130-custom-scrollbars-in-webkit/.

Answer 2

For those interested, there is a way to somewhat style the scrollbar in Lion OS X 10.7, although it can be quite tedious. Although Krinkle's fix (or something similar) is probably the best option.

html {
  overflow: auto;
}

body {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  overflow-y: scroll;
  overflow-x: hidden;
}

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

::-webkit-scrollbar-track {
  visibility: hidden; /* does not always work */
}

::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background: rgba(0,0,0,0.5);
}

::-webkit-scrollbar:window-inactive {
    visibility: hidden;
}

This code mimics Lion's default dark scrollbar as closely as possible. Check out this article for more information on customizing scrollbars in Webkit browsers: http://css-tricks.com/9130-custom-scrollbars-in-webkit/.

Answer 3

Answer №2

While conducting tests on Safari and Chrome, it appears that the scrollbar style is determined by the background color of the body element specifically, rather than the content underneath the scrollbar.

Therefore, if your webpage has a dark background color for the body, the scrollbar will automatically appear in a brighter, contrasting color.

For instance, consider the code snippet below:

html {
    background: white;
}
body {
    width: 50%;
    background: black;
}

This setup will result in a white colored scrollbar (due to the black body background), even though the surface the scrollbar resides on (the right side of the html element) is white, creating an almost invisible effect with a subtle grey border.

Check out the demonstration on Safari at https://codepen.io/Krinkle/full/aPZNXp.

https://i.sstatic.net/4xIan.png

Answer 4

While conducting tests on Safari and Chrome, it appears that the scrollbar style is determined by the background color of the body element specifically, rather than the content underneath the scrollbar.

Therefore, if your webpage has a dark background color for the body, the scrollbar will automatically appear in a brighter, contrasting color.

For instance, consider the code snippet below:

html {
    background: white;
}
body {
    width: 50%;
    background: black;
}

This setup will result in a white colored scrollbar (due to the black body background), even though the surface the scrollbar resides on (the right side of the html element) is white, creating an almost invisible effect with a subtle grey border.

Check out the demonstration on Safari at https://codepen.io/Krinkle/full/aPZNXp.

https://i.sstatic.net/4xIan.png

Answer 5

Answer №3

Big shoutout to @EdwardLoveall for sharing his solution and link. Here is my take on his method to create a scrollbar with more of an iOS-style look (I'm using Lion + Chrome 19).

::-webkit-scrollbar {
    background-color: black;
    width: 1.25em /* 20px / 16px */;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.33333);
    border: 0.25em /* 4px / 16px */ solid black;
    border-radius: 1.25em /* 20px / 16px */;
}

As mentioned by him, it's tricky to hide the track completely, but you can give it a background. Transparent background doesn't work well as it extends beyond the HTML element, creating white space below it. Some properties like margin, padding, or opacity may not work; however, adding a thick border in the same color as the background gives the thumb some breathing room.

Answer 6

Big shoutout to @EdwardLoveall for sharing his solution and link. Here is my take on his method to create a scrollbar with more of an iOS-style look (I'm using Lion + Chrome 19).

::-webkit-scrollbar {
    background-color: black;
    width: 1.25em /* 20px / 16px */;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(255,255,255,0.33333);
    border: 0.25em /* 4px / 16px */ solid black;
    border-radius: 1.25em /* 20px / 16px */;
}

As mentioned by him, it's tricky to hide the track completely, but you can give it a background. Transparent background doesn't work well as it extends beyond the HTML element, creating white space below it. Some properties like margin, padding, or opacity may not work; however, adding a thick border in the same color as the background gives the thumb some breathing room.

Answer 7

Answer №4

To achieve this effect, you need to first set the light or dark background for the html and body elements so that the scrollbar will appear in a contrasting color. After that, you can add your desired background to the wrapper element.

html,body {
    height: 100%;
    background: #000;
}
.wrap {
    height: 100%;
    background: #FFF;
}

The use of height: 100%; in the CSS rules is important for making the wrapper stretch to fill the page even when there is minimal content.

Answer 8

To achieve this effect, you need to first set the light or dark background for the html and body elements so that the scrollbar will appear in a contrasting color. After that, you can add your desired background to the wrapper element.

html,body {
    height: 100%;
    background: #000;
}
.wrap {
    height: 100%;
    background: #FFF;
}

The use of height: 100%; in the CSS rules is important for making the wrapper stretch to fill the page even when there is minimal content.

Customizing the scroll bar hue on Safari for Lion operating system (OS X 10.7)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The responsive design of Bootstrap NavBar seems to be malfunctioning when viewed on an iPhone device

Exclusive bug discovery: figcaption mysteriously disappearing in Safari browser

I require the flexbox children to be arranged in a regular manner

Conceal Navigation Panel while Scrolling Down, Reveal when Scrolling Up, Compatible with Chrome, Incompatible with Safari (on smartphones

Creating a bespoke Bootstrap 4 Modal experience without the backdrop

Switching downlink to top link when scrolling downwards

Safari browser cutting off POST parameters prematurely

Enhancing text visibility in dompdf by making it bold or increasing its size

The screen is cloaked in a dark veil, rendering it completely inaccessible with no clickable

Issue encountered: The CSS provided is not valid as it is expecting a selector or at-rule after "body", but instead found "{". This error is located on line 4 of the code

Is it possible to prevent the fade out of the image when hovering over the text after hovering over the div or image, causing the text to fade in?

The slider class in the div is not showing the image, but it is visible in the elements

Step-by-step guide on replicating a website along with its CSS styles and scripts

When I click on the icon, I wish for it to revert back to its original state by spinning

Guide on altering a Tailwind Class depending on the React State or Props

Surround Content with Rotated Container

The Bootstrap modal is not properly clearing all attribute properties when it is hidden

Trouble with CSS animation when incorporating JavaScript variables from a PHP array

"Create a sleek slider with a modern Apple store aesthetic using Javascript

Switch videos within the video tag as you scroll