43

小さなスペースに多くのコンテンツを表示するために使用するオーバーフローした div が多数あります (長いリストなど)。div に CSS ルールをoverflow: auto;常に適用することは魅力的に機能し、より多くのコンテンツが利用可能であることを示すスクロール バーをユーザーに提供します。

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

これは正当な懸念事項ですか? それとも Lion ユーザーは、何かが途切れているように見える場合、スクロールが利用できる可能性があることを示していることを知っていますか? ページ上の要素 (ページ自体ではない) の場合、Lion で実行されているブラウザに強制的にスクロール バーを表示させる回避策はありますか?

4

6 に答える 6

12

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

コードを Mac Safari Chrome などで開く (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>
于 2012-02-14T10:55:18.820 に答える
7

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

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

于 2011-07-25T15:47:36.167 に答える
0

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

スクロール可能性をより明確にするために UI を改善できる場合は、どちらの方法でも実行してください。それ以外の場合、コンテンツが他にもあることを示唆する方法で表示されている場合、ユーザーが慣れているシステムでスクロールバーが表示されないことを心配する必要はありません。

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

于 2011-08-18T10:10:47.347 に答える
0

OS X Lion は実際に問題を強制しているだけです。モバイル ブラウザー (iOS と Andriod の両方) のユーザーは、これについて長い間不満を抱いてきました... オーバーフローのトリックは一般的には機能しません。ページのデザインについてもっとよく考えるか、標準的なブラウザーの動作を超えて検討し、タッチとスクロールの JavaScript サポート (jqTouch など) を追加する必要があります。

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

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

于 2012-03-09T14:46:01.480 に答える
0

私はちょうどこの同じ問題を扱っていました。これが私が見つけた修正です。私がテストした Mac Air と 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);
}
于 2013-04-10T18:12:31.023 に答える
-2

Mac ユーザーではないので、Lion がスクロール バーを非表示にするかどうかについての哲学的な議論には近づかないことにします。

スクロール バーを Web ページ要素に強制的に表示する場合overflow: scrollは、CSS を設定するだけでうまくいきます。これにより、垂直スクロールバーと水平スクロールバーの両方が常に表示されるように設定され、スクロールするものがない場合は非常に明白です。

垂直方向または水平方向にのみスクロールし、他の次元のスクロールバーを表示したくない場合は、 の代わりにoverflow-y: scrollまたはをそれぞれ使用できます。これは、IE8 以下では機能しませんが、最新のすべてのブラウザーで機能します。overflow-x: scrolloverflow: scroll

于 2011-12-21T22:12:24.770 に答える