web-dev-qa-db-ja.com

WebKit / BlinkでMacOSトラックパッドユーザーのスクロールバーが非表示にならないようにする

10.7（Mac OS X Lion）以降のMacOSでのWebKit/Blink（Safari/Chrome）のデフォルトの動作は、使用していないトラックパッドユーザーからスクロールバーを非表示にすることです。 これは混乱を招く可能性があります ;多くの場合、スクロールバーは、要素がスクロール可能な唯一の視覚的な合図です。

例（ jsfiddle ）

<div class="frame">
    Foo<br />
    Bar<br />
    Baz<br />
    Help I'm trapped in an HTML factory! 
</div>

.frame {
    overflow-y: auto;
    border: 1px solid black;
    height: 3em;
    width: 10em;
    line-height: 1em;
}​

screenshot of a div with no visible scroll bar

screenshot of a div with a visible scroll bar

WebKitのスクロール可能な要素に常にスクロールバーを表示するにはどうすればよいですか？

cssmacoswebkitscrollbarblink
154
Jeremy Banks

スクロールバーの外観は、WebKitの-webkit-scrollbar疑似要素で制御できます[ ブログ ]。 -webkit-appearanceを設定すると、デフォルトの外観と動作を無効にできます[ docs ] noneに。

デフォルトのスタイルを削除するため、スタイルを自分で指定する必要もあります。そうしないと、スクロールバーが表示されなくなります。次のCSSは、非表示のスクロールバーの外観を再作成します。

例（ jsfiddle ）

.frame::-webkit-scrollbar {
    -webkit-appearance: none;
}

.frame::-webkit-scrollbar:vertical {
    width: 11px;
}

.frame::-webkit-scrollbar:horizontal {
    height: 11px;
}

.frame::-webkit-scrollbar-thumb {
    border-radius: 8px;
    border: 2px solid white; /* should match background, can't be transparent */
    background-color: rgba(0, 0, 0, .5);
}

.frame::-webkit-scrollbar-track { 
    background-color: #fff; 
    border-radius: 8px; 
}

screenshot showing webkit's scrollbar, without needing to hover

237
Jeremy Banks

スクロール可能なセクションを動的に追加する1ページのWebアプリケーションの場合、プログラムで1ピクセル上下にスクロールしてOSXのスクロールバーをトリガーします。

// Plain JS:
var el = document.getElementById('scrollable-section');
el.scrollTop = 1;
el.scrollTop = 0;

// jQuery:
$('#scrollable-section').scrollTop(1).scrollTop(0);

これにより、視覚的なキューのフェードインとフェードアウトがトリガーされます。

17
Blaise

以下は、Webサイト全体のスクロールバーを再度有効にする短いコードです。それが現在の最も人気のある答えと大きく異なるかどうかはわかりませんが、ここにあります：

::-webkit-scrollbar {
    -webkit-appearance: none;
    width: 7px;
}
::-webkit-scrollbar-thumb {
    border-radius: 4px;
    background-color: rgba(0,0,0,.5);
    box-shadow: 0 0 1px rgba(255,255,255,.5);
}

このリンクで発見： http://simurai.com/blog/2011/07/26/webkit-scrollbar

12
Alex Banman

ブラウザのスクロールバーは、iPhone/iPadではまったく機能しません。職場では、jScrollPaneなどのカスタムJavaScriptスクロールバーを使用して、一貫したクロスブラウザーUIを提供しています： http://jscrollpane.kelvinluck.com/

それは私にとって非常にうまく機能します-あなたはあなたのサイトのデザインに合ういくつかの本当に美しいカスタムスクロールバーを作ることができます。

3
Chris M. Welsh

Lionの隠されたスクロールバーを扱うもう1つの良い方法は、下にスクロールするプロンプトを表示することです。テキストフィールドなどの小さなスクロール領域では機能しませんが、大きなスクロール領域ではうまく機能し、サイトの全体的なスタイルを維持します。これを行う1つのサイトは http://versusio.com です。このサンプルページを確認し、プロンプトが表示されるまで1.5秒待ちます。

http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-Apple-iphone-4s-64gb

実装は難しくありませんが、ユーザーが既にスクロールしているときにプロンプ​​トを表示しないように注意する必要があります。

JQuery +アンダースコアが必要です

$(window).scrollユーザーが既に自分でスクロールしたかどうかを確認するには、

_.delay()プロンプトを表示する前に遅延をトリガーします-プロンプトが目障りにならないようにする必要があります

$('#Prompt_div').fadeIn('slow')プロンプトをフェードインし、もちろん

$('#Prompt_div').fadeOut('slow')プロンプトを見た後にユーザーがスクロールしたときにフェードアウトする

さらに、Googleアナリティクスイベントをバインドして、ユーザーのスクロール動作を追跡できます。

2
user976647