Mac OS X Lion, scrollbars, and website usability

Question

I have a number of overflowed divs that I use to display a lot of content in small space (like long lists, etc). Giving the divs the CSS rule of overflow: auto; always worked like a charm, giving the user scroll bars to indicate more content was available.

This is kinda thrown out the window with Mac OS X Lion, which (as a default) hides the scroll bars unless you're actively scrolling. I like it when dealing with an application on my computer, because I think there are very strong visual clues that you can scroll to see more content. On webpage elements, it's a lot less clear, and I'm worried that my users won't know there's more content available (case in point: StackOverflow's "Questions with similar titles" when entering in a new question is a good example of this).

Is this a legitimate concern, or will Lion users know that if something appears to be cut off, it indicates that scrolling might be available? Are there any workarounds to, say, force browsers running on Lion to render scroll bars if it's an element on the page (and not the page itself)??

Answer 1

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>