{"id":235,"date":"2015-03-03T15:59:23","date_gmt":"2015-03-03T15:59:23","guid":{"rendered":"http:\/\/www.confidant.ca\/blog\/?p=235"},"modified":"2015-03-03T16:05:44","modified_gmt":"2015-03-03T16:05:44","slug":"how-to-force-firefox-chrome-and-safari-for-mac-to-display-scrollbars","status":"publish","type":"post","link":"https:\/\/www.confidant.ca\/blog\/2015\/how-to-force-firefox-chrome-and-safari-for-mac-to-display-scrollbars\/","title":{"rendered":"How to force Firefox, Chrome and Safari for Mac to display scrollbars"},"content":{"rendered":"<p>Since OS X Lion came out, Macs have had the strange habit of making scrollbars disappear when an HTML div element is overflowing but not actively scrolling. This puzzles me because usually Macs are great for user interface improvements, and this is a step backward in my opinion. Sure, Mac users <a title=\"Fix your Mac scrolling preferences\" href=\"http:\/\/osxdaily.com\/2011\/08\/03\/show-scroll-bars-mac-os-x-lion\/\">have the option of re-enabling the scroll behaviour<\/a>, but web developers want to make sure people know to scroll.<\/p>\n<p>There is <a title=\"The Chrome and Safari fix for scrollbars\" href=\"http:\/\/www.scriptcult.com\/subcategory_2\/article_575-force-scrollbars-on-mac-os-lion-webkit.htm\">no cross-browser way<\/a> of fixing this with just CSS according to my research, so I came up with this solution using JavaScript:<\/p>\n<p>First, use this CSS to make sure your div is set to show scrollbars:<\/p>\n<pre><code class=\"prettify\">\n.mydiv{ overflow-y:auto; }\n<\/code><\/pre>\n<p>Then attach this script to your page (this requires JQuery).<\/p>\n<pre>\r\nvar sc;\r\njQuery(document).ready(function(){\r\n\t\/\/constantly update the scroll position:\r\n\tsc=setInterval(scrollDown,200);\r\n\r\n\t\/\/optional:stop the updating if it gets a click\r\n\tjQuery('.mydiv').mousedown(function(e){\r\n\t\tclearInterval(sc);            \r\n\t});\r\n});\r\nfunction scrollDown(){\r\n\tfor(i=0;i<=jQuery('.mydiv').length;i++){\r\n\t\ttry{\r\n\t\tvar g=jQuery('.mydiv')[i];\r\n\t\tg.scrollTop+=1;\r\n\t\tg.scrollTop-=1;\r\n\t\t} catch(e){\r\n\t\t\/\/eliminates errors when no scroll is needed\r\n\t\t}\r\n\t}\r\n}\r\n\r\n<\/pre>\n<p>Purists may object to using a JavaScript loop in this way. Sorry, but sometimes when you want bacon you have to butcher a pig. :)<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Since OS X Lion came out, Macs have had the strange habit of making scrollbars disappear when an HTML div element is overflowing but not actively scrolling. This puzzles me because usually Macs are great for user interface improvements, and this is a step backward in my opinion. Sure, Mac users have the option of &hellip; <a href=\"https:\/\/www.confidant.ca\/blog\/2015\/how-to-force-firefox-chrome-and-safari-for-mac-to-display-scrollbars\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">How to force Firefox, Chrome and Safari for Mac to display scrollbars<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1],"tags":[],"class_list":["post-235","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p28GE6-3N","_links":{"self":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/235","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/comments?post=235"}],"version-history":[{"count":10,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions"}],"predecessor-version":[{"id":245,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/posts\/235\/revisions\/245"}],"wp:attachment":[{"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/media?parent=235"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/categories?post=235"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.confidant.ca\/blog\/wp-json\/wp\/v2\/tags?post=235"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}