Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

force scrollbar on Safari

Tags:

html

css

Is there a way to force the vertical scrollbar to show on Safari Lion. It only shows if you click the far right of a page. I have an element where I have overflow-y:auto but in Safari it doesn't show until you click the edge of the element.

like image 660
Chapsterj Avatar asked Jan 20 '12 19:01

Chapsterj


People also ask

How do I force scrollbar?

To show the scrollbars always on the webpage, use overflow: scroll Property. It will add both horizontal and vertical scrollbars to the webpage. To add only horizontal scrollbar use overflow-x: scroll property and for vertical scrollbar use overflow-y: scroll property.

Why my scrollbar is not working?

When the mouse won't scroll, there are two issues that most commonly cause it. The first is dust and dirt causing mechanical issues with the mouse wheel. The second is low battery issues on wireless mice. However, these aren't always the root cause.

How do you scroll sideways on safari?

Hold Shift & scroll mouse wheel. It would be interesting to know if this affects trackpads too, but I don't have one to test. macOS 11.3. 1, Safari 14.1, iMac mid-2015: Safari's horizontal scrolling displays and works as expected.


1 Answers

Ok found this online at this site http://css-tricks.com/custom-scrollbars-in-webkit/ This will make it show up in Safari Lion

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

::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}

::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}

Obviously you will need to change the properties to suite what you want. Again this is for Safari as overflow-y: scroll; does not force it to show.

If you want to assign this to a scrollbar on a specific element, you can add any css selector before:

.mydiv::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 8px;
}

.mydiv::-webkit-scrollbar-track {
    background-color: rgba(57,57,57, .6);
    border-radius: 8px;
}

.mydiv::-webkit-scrollbar-thumb {
    border-radius: 8px;
    background-color: rgba(156, 156, 156, .6);
}
like image 168
Chapsterj Avatar answered Oct 04 '22 03:10

Chapsterj