web-dev-qa-db-ja.com

Mac OS X Lion、スクロールバー、およびWebサイトの使いやすさ

小さなスペース（長いリストなど）に多くのコンテンツを表示するために使用するオーバーフローしたdivがいくつかあります。 divにoverflow: auto;のCSSルールを与えると、常に魅力のように機能し、ユーザーにスクロールバーを与えて、より多くのコンテンツが利用可能であることを示します。

これは、Mac OS X Lionではウィンドウの外に投げ出されます。MacOSXLionは、アクティブにスクロールしていない限り、（デフォルトで）スクロールバーを非表示にします。私は自分のコンピューターでアプリケーションを扱うときにそれが好きです。なぜなら、あなたがcanスクロールしてより多くのコンテンツを見るという非常に強力な視覚的手がかりがあると思うからです。ウェブページの要素については、あまり明確ではなく、利用可能なコンテンツがもっとあることをユーザーが知らないのではないかと心配しています（例：新しい質問を入力するときのStackOverflowの「類似したタイトルの質問」はこの良い例です）。

これは正当な懸念事項ですか、それともライオンのユーザーは、何かが途切れているように見える場合、スクロールが利用できる可能性があることを示していることを知っていますか？たとえば、Lionで実行されているブラウザーが（ページ自体ではなく）ページ上の要素である場合にスクロールバーをレンダリングするように強制するための回避策はありますか？

macosusabilityosx-lion
43
neezer

私はこれに同意しません。はい、UI/UXの議論を理解しています。ただし、一部のサイト、特にナビゲーションの水平アプローチでは、ナビゲーションが水平方向に進むことをユーザーが知らない可能性があるため、これが必要になります。ただし、それを強制するための修正が言及されています。私はこれがうまくいくことを発見しました：

MacSafariでコードを開く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>
12
TheBlackBenzKid

たとえば、Lionで実行されているブラウザに、ページ上の要素である場合にスクロールバーをレンダリングさせるための回避策はありますか？

これは攻撃です。システムに任せてください。ユーザーがLionを使用している場合、それは彼らがこれを気に入っているからです。そして、彼らがそれを使用し、新しいスクロールバーが気に入らない場合は、システム環境設定でそれを変更するだけです。

7
sidyll

私はこれと同じ問題を扱っていました。これが私が見つけた修正です。これにより、テストしたMacAirおよびiPadのSafariでスクロールバーが常に表示されます。もちろん、これは見られるコンテンツがもっとあるときだけです。すべてのコンテンツが表示されるときではありません。

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    -webkit-box-shadow: 0 0 1px rgba(255,255,255,.5);
}
0
The Duke Of Marshall שלום

OS XLionは本当に問題を強制しているだけです。モバイルブラウザ（iOSとAndriodの両方）のユーザーは、これについて何年もの間愚痴をこぼしてきました...オーバーフロートリックは機能しますnot一般的に機能します。ページのデザインについてもっとよく考えるか、標準のブラウザの動作を超えて見て、タッチとスクロールのJavaScriptサポートを追加する必要があります（例：jqTouch）。

残念ながら、Lionのスクロールバーの動作はWebサイトに影響を与えるだけではありません。たとえば、大きなディスプレイ設定を持つマシンへのvncセッションはかなり煩わしいものになります（スクロールバーを表示するようにLionを説得するには、vncウィンドウのサイズを変更する必要があります）。

残念ながら、解決策は「設定」>「一般」>「スクロールバーを表示：」に移動し、「常に」に設定することです。 AppleがLionで構築しようとしていた可能性のある前進の勢いを取り消すようなものです。しかし、実際に使用できるのは、汎用の切り札です。

0
tardate

Lionは、スクロール可能な要素が表示されたときにその要素のスクロールバーを瞬時に点滅させることでこれを処理し、スクロールする要素がまだあるという最初のヒントをユーザーに提供します。もちろん、ユーザーはこれに気付く場合と気付かない場合があります。ユーザーがLionのやり方に慣れている場合、これが発生するのはWebサイトだけではなく、ユーザーはおそらくそれに対処する方法を知っています。ボクセンlookがスクロールバーなしで「スクロール不能」である場合は、スクロール可能であることをより強く示すことができます。ボックスの周囲に明確な境界線があり、中にカットオフコンテンツが含まれています。これは、ライオンに関係なくやりたいことかもしれません。

UIを改善してスクロール可能性をより明確にすることができる場合は、どちらの方法でも実行できます。そうでなければ、あなたのコンテンツがもっとあることを示唆する方法で提示されれば、ユーザーがそれに慣れていれば、システム上でスクロールバーが欠落する心配はありません。

あなたはこれを https://ux.stackexchange.com/ に持っていき、実際の専門家の意見を聞くことができます。

0
deceze