CSS を使って Google の新しいスクロールバーに似たものを作ってみました::-webkit-scrollbar。クロムではすべて正常に動作しますが、サファリでは動作しません。
私のCSSは
::-webkit-scrollbar{height:16px;overflow:visible;width:16px}
::-webkit-scrollbar-button{height:0;width:0}
::-webkit-scrollbar-track{background-clip:padding-box;box-shadow:inset 1px 0 0 #e6e6e6}
::-webkit-scrollbar-track:hover{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #e6e6e6}
::-webkit-scrollbar-track:active{background-color:#f3f3f3;box-shadow:inset 1px 0 0 #dcdcdc,inset -1px 0 0 #eeeeee}
::-webkit-scrollbar-thumb{background-color:#cccccc;background-clip:padding-box;border:solid transparent;border-width:1px 1px 1px 0px;min-height:28px;padding:100px 0 0;box-shadow:inset 1px 1px 0 #e6e6e6,inset 0 -1px 0 #eeeeee}
::-webkit-scrollbar-thumb:hover{background-color:#999999;box-shadow:inset 1px 1px 1px #c0c0c0}
::-webkit-scrollbar-thumb:active{background-color:#808080;box-shadow:inset 1px 1px 3px #a6a6a6}
問題のスクリーンショットを作成しました。
これはクロムで問題ありません: http://i.imgur.com/wQMP2.png
これは、マウスで (クリックせずに) スクロールしようとするとサファリになります: http://i.imgur.com/bFiWj.png
マウスでクリックしてスクロールバーを使用すると、スクロールバーが機能します。問題は、トラックパッドまたはスクロールホイールを使用する場合のみです
(私は Mac の Safari で試しましたが、Windows の Safari では試しませんでした)