Verhindern, dass Bildlaufleisten für MacOS-Trackpad-Benutzer in WebKit / Blink ausgeblendet werden
WebKit/Blink (Safari/Chrome) Standard-Verhalten unter Mac OS seit 10.7 (OS X Lion) ist das ausblenden der Bildlaufleisten aus-trackpad-Nutzer, wenn Sie nicht in Gebrauch ist. Dies kann verwirrend sein; das scroll-bar ist oft die einzige visuelle cue, dass ein element ist die durchlaufbaren.
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;
}
WebKit (Chrome) Screenshot
Presto (Opera) Screenshot
Wie kann ich erzwingen, ein scroll-Balken immer angezeigt werden auf einem scrollbaren element in WebKit?
InformationsquelleAutor der Frage Jeremy | 2011-10-21
Schreibe einen Kommentar Antworten abbrechen
Du musst angemeldet sein, um einen Kommentar abzugeben.
Die Darstellung der Bildlaufleisten gesteuert werden kann mit WebKit -
-webkit-scrollbar
pseudo-Elemente [blog]. Sie können deaktivieren Sie das standardmäßige Aussehen und Verhalten durch das setzen-webkit-appearance
[docs] zunone
.Weil Sie das entfernen der Standard-Stil, Sie müssen auch angeben, den Stil, den Sie selbst oder die Bildlaufleiste wird nie angezeigt. Die folgenden CSS legt die Darstellung des ausblenden von Bildlaufleisten:
Beispiel (jsfiddle)
CSS
WebKit (Chrome) Screenshot
InformationsquelleAutor der Antwort Jeremy
Für eine one-page-web-Anwendung, wo ich hinzufügen scrollbare Sektionen dynamisch, ich trigger OSX den Bildlaufleisten durch den programmatisch scrollen um ein pixel nach unten und zurück:
Dadurch wird die visual-cue-und ausblenden.
InformationsquelleAutor der Antwort Blaise
Hier ist eine kürzere bit-code, der reenables scroll-Balken auf der gesamten website. Ich bin mir nicht sicher, ob es viel anders als die aktuelle beliebteste Antwort, aber hier ist es:
Unter diesem link gefunden: http://simurai.com/blog/2011/07/26/webkit-scrollbar
InformationsquelleAutor der Antwort Alex Banman
Browser-scrollbars funktionieren nicht auf dem iPhone/iPad. An die Arbeit, die wir mithilfe von benutzerdefinierten JavaScript-Scrollbalken wie jScrollPane, um eine konsistente cross-browser-UI: http://jscrollpane.kelvinluck.com/
Es funktioniert sehr gut für mich - Sie können einige wirklich schöne benutzerdefinierte Scrollbalken, die passen das design Ihrer Website.
InformationsquelleAutor der Antwort Chris M. Welsh
Eine gute Möglichkeit, um den Umgang mit dem Lion ' s hidden scroll-Balken in der Anzeige eine Eingabeaufforderung, navigieren Sie nach unten. Es funktioniert nicht mit kleinen Blättern Bereiche wie text-Felder, sondern auch mit großen scroll-Bereiche und hält den Allgemeinen Stil der Website. Ein Ort, dies zu tun ist http://versusio.comeinfach mal diese Beispiel-Seite und warten von 1,5 Sekunden auf die Aufforderung:
http://versusio.com/en/samsung-galaxy-nexus-32gb-vs-apple-iphone-4s-64gb
Die Umsetzung ist nicht schwer, aber man muss aufpassen, dass Sie nicht bei Anzeige der Eingabeaufforderung, wenn der Anwender bereits gescrollt werden.
Müssen Sie jQuery + Unterstrich und
$(window).scroll
um zu überprüfen, ob der Anwender bereits gescrollt selbst,
_.delay()
zum auslösen einer Verzögerung vor der Anzeige des prompt-Eingabeaufforderung sollte nicht zu aufdringlich
$('#prompt_div').fadeIn('slow')
zu verblassen in die Eingabeaufforderung, und natürlich
$('#prompt_div').fadeOut('slow')
ausblenden wenn der Benutzer gescrollt, nachdem er sah die Eingabeaufforderung
Darüber hinaus können Sie binden Sie Google Analytics-Ereignisse zu verfolgen, user ' s scrolling-Verhalten.
InformationsquelleAutor der Antwort user976647