Chrome (windows) nicht scrollbar ausblenden

Habe ich in diesem scrollbaren div, die (auf meinem Mac in Chrome) blendet die Bildlaufleiste, wenn ich nicht scrollen. Auf windows 8 ist jedoch, es funktioniert nicht in Chrome und Firefox.

Ie nicht unterstützt diese auch, aber ich habe ihn aktiviert mit den folgenden CSS:

-ms-overflow-style: -ms-autohiding-scrollbar;

Gibt es eine Möglichkeit, zu aktivieren dieses Verhalten für Chrome und Firefox

Hier ist ein jsfiddle

InformationsquelleAutor Jeanluca Scaljeri | 2014-07-23

  1. 21

    vielleicht können Sie so etwas wie, dass?

    body {
    margin:0;
    padding:0;
    overflow-y: hidden;

}
body:hover {
    overflow-y: scroll;
}

    http://jsfiddle.net/4RSbp/165/

    schön trik Mann 🙂
    Das fühlt sich hinterhältig, aber ich mag es. Tat genau das, was ich wollte.
    Könnte dies dazu führen, Probleme der Zugänglichkeit?

    InformationsquelleAutor lehi_net

  2. 10

    Bildlaufleiste versteckt auf Ihrem Mac da diese system-Einstellungen (System-Einstellungen > allgemein - > Show scroll bars). Und leider gibt es keine version von -ms-overflow-style für Firefox oder Chrome.

    Danke. Dies ist, was ich kam hierher, um herauszufinden, ??

    InformationsquelleAutor marcelo2605

  3. 2

    Für jeden einzelnen hier, wenn Sie möchten, ausblenden von Bildlaufleisten in einem cross-browser -, cross-system Weg, und halten Sie die Scroll-Fähigkeit aktiviert werden, ohne visual glitching der Maus über rendering; verstecken Sie hinter die Grenzen des Containers ist ein guter Ansatz. (Vorsicht, das wird lang)

    Lassen Sie uns sagen, Sie haben einen scrollbaren container und Sie ausblenden möchten Sie die vertikale Bildlaufleiste (auch die dünnen, transparenten einer, der modernen Systeme zeigt). seine ID ist #Scrollbar:

    <html>
[...]
<div id="scrollable">Some Y large content</div>
[...]
</html>

    Erreichen, was wir wollen, #Scrollbar enthalten sein muss, durch einen Knoten, der ausschließlich für Sie (ein div funktionieren würde, in diesem Beispiel #Scrollbar-cover) und wir müssen wissen, #scrollable-layout Breite und Höhe. Können sagen, es werde eine Fläche von 800px x 900px. Wir haben also:

    <html>
[...]
<div id="scrollable-cover">
 <div id="scrollable">Some Y large content</div>
</div>
[...]
</html>

    Und seine CSS:

    #scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
}

    Mit,, #Scrollbar gestreckt werden, um die Höhe der sofortige Elternteil (#Scrollbar-cover) und seine großen Inhalt gerendert wird, wie ein scrollbares Feld, aber, da seine Breite 20px größer als seine Eltern, hat ein 'overflow: hidden' - Eigenschaft der scrollbar wird nicht angezeigt, weil es macht auf die 20px versteckt auf der rechten Seite des #Scrollbar.

    Diese führen uns auf eine unbequeme, der Inhalt von #Scrollbar könnte auch sein, rendering, hidden 20px Breite Fläche; um das zu vermeiden, gibt es zwei Methoden. Eine ist die wrapper für alle Inhalte der #Stufen #Scrollbar-wrapper mit 800px Breite und auto-Höhe:

    <html>

[...]

<style>
#scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
}
#scrollable-wrapper {
 width: 800px;
 height: auto;
}
</style>

[...]

<div id="scrollable-cover">
 <div id="scrollable">
  <div id="scrollable-wrapper">Some Y large content</div>
 </div>
</div>

[...]

</html>

    Diese Weise werden alle Inhalte dargestellt werden, die in einem 800px Breite layout in unserem scrollbare box. Aber, wenn Sie nicht möchten, fügen Sie ein anderes element, Sie können dies lösen, mit der Zweiten CSS nur noch die Möglichkeit, mit Hilfe von box-sizing ein a 20px padding rechts:

    #scrollable-cover {
 width: 800px;
 height: 900px;
 overflow: hidden
}
#scrollable {
 width: 820px;
 height: 100%;
 overflow: scroll;
 padding-right: 20px
 box-sizing: border-box;
}

    Diese Weise etwas gerendert in #Scrollbar vermeiden die 20px versteckten Bereich auf der rechten Seite, und 'box-sizing: border-box" wird dem browser mitteilen, gehören die 20px von der Polsterung in der gesamten Breite von 820px #Scrollbar (sonst, es wird wachsen, um eine berechnete Summe von 840px). Check box-sizing Kompatibilität hier: http://caniuse.com/#search=box-sizing

    Und natürlich kann dieses Beispiel auch mit den horizontalen Bildlauf, nur die Erhöhung der Höhe von #Scrollbar 20px über der Höhe der sofortige Elternteil. Das ist die Ahnung 😉

    InformationsquelleAutor Josué Martín Hernández

Schreibe einen Kommentar