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

162

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

例（jsfiddle）

HTML

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

CSS

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

WebKit（Chrome）スクリーンショット

スクロールバーが表示されていないdivのスクリーンショット

Presto（Opera）スクリーンショット

スクロールバーが表示されているdivのスクリーンショット

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

— ジェレミー・バンクス
ソース

あなたはoverflow：scrollを試しましたか？以前はChromeで機能していました。スクロールバーが常に表示されるようにします。

— xaddict

2

それは、Mac OS X上のFirefoxにも問題だと注意

— ブレーズ

私のシステムとユーザーエージェントのWebサイトがUIで混乱しているときは嫌です。

— 午前

249

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

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

例（jsfiddle）

CSS

.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; 
}

WebKit（Chrome）スクリーンショット

ホバーする必要がない、Webkitのスクロールバーを示すスクリーンショット

— ジェレミー・バンクス
ソース

1

強制されたmacosxライオンスクロールバーの場合、ここで説明されているトリックはこの手法では機能しません：stackoverflow.com/a/3417992/62255。ただし、ここではディメンションを明示的に設定しているため、直接アクセスできます。

— jedierikb 2012

5

あなたもしてスクロールバーのトラック/背景をカスタマイズできることに注意してください：.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

WebkitのスクロールバーのスタイルはiOS 7（場合によっては6）では機能しないことに注意してください。

— RobW 2014年

4

言及すべきことの1つは、私のテストと他の誰かによる非常に古いコメントでは、常にオンのスクロールバーと、iOSで慣れている勢いのようなスクロールはできないようだということです。こう勢いスクロールCSSは私のカスタムスクロールバーが消える原因。

— jmq 2015年

2

最近これを確認していませんが、このソリューションを参照するCSSでこのメモを見つけました。「これは、WindowsのChromeなど、OS Xスタイルのスクロールバーを表示することに注意してください。」

— Henrik N

19

スクロール可能なセクションを動的に追加する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);

これにより、視覚的なキューがフェードインおよびフェードアウトします。

— ブレーズ
ソース

19

以下は、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

— アレックスバンマン
ソース

3

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

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

— クリス・M・ウェールズ
ソース

2

Lionの非表示のスクロールバーを処理する別の良い方法は、下にスクロールするようにプロンプトを表示することです。テキストフィールドなどの小さなスクロールエリアでは機能しませんが、大きなスクロールエリアではうまく機能し、サイトの全体的なスタイルを維持します。これを行う1つのサイトはhttp://versusio.comです。。を確認し、1.5秒待ってプロンプトを確認してください。

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

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

jQuery + Underscoreと

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

_.delay() プロンプトを表示する前に遅延をトリガーする-プロンプトが邪魔になるべきではありません

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

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

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

— ユーザー976647
ソース