I disagree with this. Yes, I understand the UI/UX argument. However some sites, especially the Horizontal approach for navigation would need this as users may not know navigation goes horizontally. A fix to force it however has been mentioned. I have found this works fine:
Open my code in Mac Safari Chrome etc (JS FIDDLE PREVIEW)
<style type="text/css">
#horiz_scroll::-webkit-scrollbar {
-webkit-appearance:none !important;
width:11px !important
}
#horiz_scroll::-webkit-scrollbar {
border-radius:8px !important;
border:2px solid white !important;
background-color:#ccc !important
}
#horiz_scroll::-webkit-scrollbar-thumb {
border-radius:8px !important;
border:2px solid white !important;
background-color:rgba(0,0,0,.5) !important
}
/*
// If you want it on hover //
#horiz_scroll::-webkit-scrollbar:active,
#horiz_scroll::-webkit-scrollbar:hover,
#horiz_scroll::-webkit-scrollbar:focus{border-radius:8px !important;border:2px solid white !important;background-color:#ccc !important}
*/
</style>
<div id="horiz_scroll" style="width:943px;height:480px;overflow:auto">
<!-- Just fit content inside this that scrolls horizontally. Example -->
<table id="Table_01" height="350" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<div style="background:#eee;width:9000px;min-height:400px">hello</div>
</td>
</tr>
</table>
</div>