Verhindern, dass Bildlaufleisten für MacOS-Trackpad-Benutzer in WebKit / Blink ausgeblendet werden

Das Standardverhalten von WebKit / Blink (Safari / Chrome) unter MacOS seit 10.7 (Mac OS X Lion) besteht darin, Bildlaufleisten vor Trackpad-Benutzern auszublenden, wenn diese nicht verwendet werden. Dies kann verwirrend sein ; Die Bildlaufleiste ist häufig der einzige visuelle Hinweis darauf, dass ein Element scrollbar ist.

Beispiel ( 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;
}​

Wie kann ich erzwingen, dass eine Bildlaufleiste immer auf einem scrollbaren Element in WebKit angezeigt wird?

Das Aussehen der Bildlaufleisten können mit WebKit gesteuert werden -webkit-scrollbarpseudo-Elemente  ^{[ Blog ]} . Sie können das standardmäßige Erscheinungsbild und Verhalten deaktivieren, indem Sie -webkit-appearance ^{[ docs ]} auf setzen none.

Da Sie den Standardstil entfernen, müssen Sie den Stil auch selbst angeben, da sonst die Bildlaufleiste nie angezeigt wird. Das folgende CSS erstellt das Erscheinungsbild der ausgeblendeten Bildlaufleisten neu:

Beispiel ( 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; 
} 

Bei einer einseitigen Webanwendung, bei der ich dynamisch scrollbare Abschnitte hinzufüge, löse ich die Bildlaufleisten von OSX aus, indem ich programmgesteuert um ein Pixel nach unten und oben scrolle:

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

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

Dies löst das Ein- und Ausblenden des visuellen Hinweises aus.

Hier ist ein kürzerer Code, der Bildlaufleisten auf Ihrer gesamten Website wieder aktiviert. Ich bin mir nicht sicher, ob es viel anders ist als die derzeit beliebteste Antwort, aber hier ist es:

::-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);
}

Gefunden unter diesem Link: http://simurai.com/blog/2011/07/26/webkit-scrollbar

Browser-Bildlaufleisten funktionieren auf iPhone / iPad überhaupt nicht. Bei der Arbeit verwenden wir benutzerdefinierte JavaScript-Bildlaufleisten wie jScrollPane, um eine konsistente browserübergreifende Benutzeroberfläche bereitzustellen: http://jscrollpane.kelvinluck.com/

Es funktioniert sehr gut für mich - Sie können einige wirklich schöne benutzerdefinierte Bildlaufleisten erstellen, die zum Design Ihrer Website passen.

Eine andere gute Möglichkeit, mit den versteckten Bildlaufleisten von Lion umzugehen, besteht darin, eine Aufforderung zum Scrollen nach unten anzuzeigen. Es funktioniert nicht mit kleinen Bildlaufbereichen wie Textfeldern, sondern gut mit großen Bildlaufbereichen und behält den Gesamtstil der Site bei. Eine Site, die dies tut, ist http://versusio.com . Überprüfen Sie einfach diese Beispielseite und warten Sie 1,5 Sekunden, bis die Eingabeaufforderung angezeigt wird:

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

Die Implementierung ist nicht schwierig, aber Sie müssen darauf achten, dass die Eingabeaufforderung nicht angezeigt wird, wenn der Benutzer bereits einen Bildlauf durchgeführt hat.

Sie benötigen jQuery + Underscore und

$(window).scroll um zu überprüfen, ob der Benutzer bereits selbst gescrollt hat,

_.delay() Um eine Verzögerung auszulösen, bevor Sie die Eingabeaufforderung anzeigen, sollte die Eingabeaufforderung nicht zu aufdringlich sein

$('#prompt_div').fadeIn('slow') um Ihre Aufforderung einzublenden und natürlich

$('#prompt_div').fadeOut('slow') Ausblenden, wenn der Benutzer gescrollt hat, nachdem er die Eingabeaufforderung gesehen hat

Darüber hinaus können Sie Google Analytics-Ereignisse binden, um das Bildlaufverhalten der Nutzer zu verfolgen.