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

162

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 )

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

Screenshot des WebKit (Chrome)

Screenshot eines Div ohne sichtbare Bildlaufleiste

Screenshot von Presto (Opera)

Screenshot eines Div mit einer sichtbaren Bildlaufleiste

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

— Jeremy Banks
quelle

Haben Sie versucht, überlaufen: scrollen? Dies funktionierte früher in Chrome. Es sollte erzwingen, dass die Bildlaufleisten immer angezeigt werden.

— Xaddict

2

Beachten Sie, dass es auch ein Problem in Firefox unter Mac OS X ist.

— Blaise

Mann, ich hasse es, wenn Websites mit der Benutzeroberfläche meines Systems und des Benutzeragenten in Konflikt geraten.

— amn

249

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 )

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

Screenshot des WebKit (Chrome)

Screenshot mit der Bildlaufleiste des Webkits, ohne den Mauszeiger bewegen zu müssen

— Jeremy Banks
quelle

1

Bei erzwungenen Macosx-Löwen-Bildlaufleisten funktioniert der hier beschriebene Trick mit dieser Technik nicht: stackoverflow.com/a/3417992/62255 . Kein Problem - da wir hier die Abmessungen explizit festlegen, können wir direkt darauf zugreifen.

— jedierikb

5

Beachten Sie, dass Sie die Spur / den Hintergrund der Bildlaufleiste auch anpassen können mit:.frame::-webkit-scrollbar-track { background-color: #FFF; border-radius: 8px; }

— XML

Beachten Sie, dass Webkit-Bildlaufleistenstile in iOS 7 (und möglicherweise 6) nicht funktionieren.

— RobW

4

Eine Sache zu erwähnen ist, dass es in meinen Tests und einem wirklich alten Kommentar von jemand anderem so aussieht, als ob Sie keine ständig aktive Bildlaufleiste UND das Momentum-ähnliche Scrollen haben können, das die Leute mit iOS gewohnt sind. Durch das CSS mit Momentum-Scrolling verschwanden meine benutzerdefinierten Bildlaufleisten.

— JMQ

2

Ich habe dies in letzter Zeit nicht überprüft, aber ich habe diesen Hinweis in unserem CSS gefunden, der auf diese Lösung verweist: "Beachten Sie, dass hier Bildlaufleisten im OS X-Stil angezeigt werden, z. B. in Chrome unter Windows."

— Henrik N

19

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.

— Blaise
quelle

19

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

— Alex Banman
quelle

3

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.

— Chris M. Welsh
quelle

2

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.

— user976647
quelle