Working around OS X Dynamic Scrollbars

Developer
JR Jenkins
Size
2,279 Kb
Views
14,168
  1. Working around OS X Dynamic Scrollbars Previews
  2. Working around OS X Dynamic Scrollbars HTML Codes
  3. Working around OS X Dynamic Scrollbars CSS Codes

How do I make an working around os x dynamic scrollbars?

By default OS X will only show scrollbars based on mouse or trackpad activity, but the later webkit browsers seems to have issues with this even on scrollable content elements like select lists with a size > 1 or iframes. This seeks to override that. Based on the following StackOverlow answer http://stackoverflow.com/a/7855592. What is a working around os x dynamic scrollbars? How do you make a working around os x dynamic scrollbars? This script and codes were developed by JR Jenkins on 04 October 2022, Tuesday.

Working around OS X Dynamic Scrollbars Previews
IQ Test

Working around OS X Dynamic Scrollbars - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Working around OS X Dynamic Scrollbars</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Fix for automatically appearing scroll bars in OS X hiding the scroll bars from a multi select elements. Based on the following StackOverlow answer http://stackoverflow.com/a/7855592 Note: I have found the fixosxscroll class is not effective if added dynamically, you would likely have to add the styles directly.
--->
<h1>Examples</h1>
<h2>No fixosxscroll class applied</h2>
<h3>Select List with multiple Items, size &lt; number of items available</h3>
<select multiple="multiple" name="example-select-list" id="example-select-list" size="5" class=""> <option value="00">Option 0</option> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">Option 3</option> <option value="04">Option 4</option> <option value="05">Option 5</option> <option value="06">Option 6</option> <option value="07">Option 7</option> <option value="08">Option 8</option> <option value="09">Option 9</option> <option value="10">Option 10</option>
</select>
<br />
<h3>Select List with multiple Items, size &gt;= number of items available</h3>
<select multiple="multiple" name="example-select-list" id="example-select-list" size="5" class=""> <option value="00">Option 0</option> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">Option 3</option>
</select>
<br />
<h3>Iframe with a fixed height and width</h3>
<iframe class='' id='example-iframe' src="http://www.ca.uky.edu" height="568px" width="320px"></iframe>
<h2>With the fixosxscroll class applied</h2>
<h3>Select List with multiple Items, size &lt; number of items available</h3>
<select multiple="multiple" name="example-select-list" id="example-select-list" size="5" class="fixosxscroll"> <option value="00">Option 0</option> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">Option 3</option> <option value="04">Option 4</option> <option value="05">Option 5</option> <option value="06">Option 6</option> <option value="07">Option 7</option> <option value="08">Option 8</option> <option value="09">Option 9</option> <option value="10">Option 10</option>
</select>
<br />
<h3>Select List with multiple Items, size &gt;= number of items available</h3>
<select multiple="multiple" name="example-select-list" id="example-select-list" size="5" class="fixosxscroll"> <option value="00">Option 0</option> <option value="01">Option 1</option> <option value="02">Option 2</option> <option value="03">Option 3</option>
</select>
<br />
<h3>Iframe with a fixed height and width</h3>
<iframe class='fixosxscroll' id='example-iframe' src="http://www.ca.uky.edu" height="568px" width="320px"></iframe>
</body>
</html>

Working around OS X Dynamic Scrollbars - Script Codes CSS Codes

.fixosxscroll { overflow-y: auto; border: 1px solid black;
}
.fixosxscroll::-webkit-scrollbar { -webkit-appearance: none;
}
.fixosxscroll::-webkit-scrollbar:vertical { width: 11px;
}
.fixosxscroll::-webkit-scrollbar:horizontal { height: 11px;
}
.fixosxscroll::-webkit-scrollbar-thumb { border-radius: 8px; border: 2px solid white; /* should match background, can't be transparent */ background-color: rgba(0, 0, 0, .5);
}
Working around OS X Dynamic Scrollbars - Script Codes
Working around OS X Dynamic Scrollbars - Script Codes
Home Page Home
Developer JR Jenkins
Username jrjenk
Uploaded October 04, 2022
Rating 3
Size 2,279 Kb
Views 14,168
Do you need developer help for Working around OS X Dynamic Scrollbars?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

JR Jenkins (jrjenk) Script Codes
Name
Style Comments
A Pen by JR Jenkins
Working around OS X Dynamic Scrollbars
Simple jQuery Accordion Example
Reminder about Geolocation
COA Color Swatches
Konami Code example
BARcade Project Demo
CSS Slide Show
UAC Decode Online
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!