How to force Firefox, Chrome and Safari for Mac to display scrollbars

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 re-enabling the scroll behaviour, but web developers want to make sure people know to scroll.

There is no cross-browser way of fixing this with just CSS according to my research, so I came up with this solution using JavaScript:

First, use this CSS to make sure your div is set to show scrollbars:

.mydiv{ overflow-y:auto; }

Then attach this script to your page (this requires JQuery).

var sc;
jQuery(document).ready(function(){
	//constantly update the scroll position:
	sc=setInterval(scrollDown,200);

	//optional:stop the updating if it gets a click
	jQuery('.mydiv').mousedown(function(e){
		clearInterval(sc);            
	});
});
function scrollDown(){
	for(i=0;i<=jQuery('.mydiv').length;i++){
		try{
		var g=jQuery('.mydiv')[i];
		g.scrollTop+=1;
		g.scrollTop-=1;
		} catch(e){
		//eliminates errors when no scroll is needed
		}
	}
}

Purists may object to using a JavaScript loop in this way. Sorry, but sometimes when you want bacon you have to butcher a pig. 🙂