wake-up-neo.net

Wie kann ich eine Browser- oder Element-Bildlaufleiste deaktivieren, trotzdem das Blättern mit den Pfeiltasten oder dem Rad ermöglichen?

Ich möchte alle Scrollbars vor meinen div-Elementen und meiner gesamten body ausblenden, den Benutzer jedoch mit dem Mausrad oder den Pfeiltasten scrollen lassen. Wie kann dies mit rohem JavaScript oder jQuery erreicht werden? Irgendwelche Ideen?

javascriptjquerycssbrowserscrollbar
51
Shizoman

Wie bei den vorherigen Antworten würden Sie overflow:hidden verwenden, um die Bildlaufleisten auf dem body/div zu deaktivieren.

Dann würden Sie das mousewheel -Ereignis an eine Funktion binden, die das scrollTop des div ändert, um das Scrollen zu emulieren.

Bei Pfeiltasten binden Sie das Ereignis keydown, um eine Pfeiltaste zu erkennen, und ändern dann scrollTop und scrollLeft des div entsprechend, um das Scrollen zu emulieren. (Hinweis: Sie verwenden keydown anstelle von keypress, da IE keypress für Pfeiltasten nicht erkennt.)
Edit: Ich konnte FF/Chrome nicht dazu bringen, keydown auf einem div zu erkennen, aber es funktioniert in IE8. Abhängig davon, wofür Sie dies benötigen, können Sie einen keydown Listener auf document setzen, um das Div zu scrollen. (Sehen Sie sich die keyCode-Referenz als Beispiel an.)

Beispiel: Scrollen mit dem Mausrad (mit jQuery und einem Mausrad-Plugin):

<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>

<script>
$("#example").bind("mousewheel",function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta));
});
</script>

(Dies ist ein schnelles Modell, Sie müssten die Zahlen anpassen, da dies für mich ein bisschen langsam rollt.)

keyCode-Referenz
Mausrad-Plugin
keydown, keypress @ quirksmode

Update 19.12.2012:

Die aktualisierte Position des Mausrad-Plugins lautet: https://github.com/brandonaaron/jquery-mousewheel

47
Grace

Was ist mit einer reinen CSS-Lösung? Ich habe das getestet und es funktioniert gut. Ich würde jedoch die Lösung 3 empfehlen, da sie nicht hackig ist, sie wird von allen Browsern mit JS unterstützt und ist sehr einfach.

Solution 1 (Browserübergreifend, aber hackiger)

#div {
  position: fixed;
  right: -20px;
  left: 20px;
  background-color: black;
  color: white;
  height: 5em;
  overflow-y: scroll;
  overflow-x: hidden;
}
<html>

<body>
  <div id="div">
    Scrolling div with hidden scrollbars!<br/>
    On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
    Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
  </div>
</body>

</html>

Lösung 2 (nur IE und Chrome)

Fügen Sie einfach die nobars-Klasse zu jedem Element hinzu, auf dem Sie die Bildlaufleisten ausblenden möchten.

Der Firefox overflow: -moz-scrollbars-none ist, gemäß MDN , veraltet. Früher funktionierte es, verbirgt jedoch jetzt den Überlauf und deaktiviert das Scrollen, falls verwendet.

.nobars {
    /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /* overflow: -moz-scrollbars-none; (no longer works) */
    /* IE: https://msdn.Microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

Solution 3 (Browserübergreifendes Javascript)

PERFEKTE BILDLAUFLEISTE erfordert nicht jQuery (obwohl jQuery verwendet werden kann, wenn es installiert ist) und verfügt über eine Demo hier verfügbar . Die Komponenten können mit css wie im folgenden Beispiel gestaltet werden:

.ps-scrollbar-y-rail {
  display: none !important;
}

Hier ist ein vollständiges Beispiel einschließlich der Implementierung von Perfect Scrollbar:

<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: scroll;
  }
  .ps-scrollbar-y-rail {
    display: none !important;
  }
</style>
<script src='js/perfect-scrollbar.min.js'></script>

<div id="container">
  Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>

<script>
  // on dom ready...
  var container = document.getElementById("container");
  Ps.initialize(container);
  //Ps.update(container);
  //Ps.destroy(container);
</script>
11
Peter Gordon

Ich bevorzuge die Antwort von SamGoody auf ein Duplikat dieser Frage. Die ursprünglichen Bildlaufeffekte bleiben erhalten, anstatt für einige bestimmte Eingabegeräte manuell neu zu implementieren:

Eine bessere Lösung ist, das Ziel div auf Überlauf zu setzen: scrollen und es in ein zweites Element einwickeln, das um 8px schmaler ist, der Überlauf: hidden.

Siehe Original-Kommentar für ein ausführliches Beispiel. Sie können JavaScript verwenden, um die tatsächliche Größe der Bildlaufleisten zu bestimmen, anstatt davon auszugehen, dass sie wie in seinem Beispiel immer 8 Pixel breit sind.

7
natevw

Sie müssen dazu nicht jquery oder js verwenden. Es ist performanter mit einfachem Webkit.

Fügen Sie einfach den folgenden Code zu Ihrer CSS-Datei hinzu.

::-webkit-scrollbar { 
    display: none; 
}

Achtung! Dadurch wird die gesamte Bildlaufleiste deaktiviert. Stellen Sie daher sicher, dass Sie sie in einer bestimmten Klasse oder ID angeben, wenn Sie nur möchten, dass eine ausgeblendet wird.

7
Baldráni

Damit dies für mich funktioniert, habe ich dieses CSS verwendet:

html { overflow-y: hidden; }

Ich hatte jedoch Probleme mit $(this).scrollTop(), also band ich mich an meine #ID, stellte aber den scrollTop des Fensters ein. Außerdem würde meine weiche Maus viele 1 oder -1 Deltas abfeuern, also habe ich das mit 20 multipliziert.

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});
4
Kevin Hakanson

Wie Baldráni oben gesagt

::-webkit-scrollbar { display: none; }

Oder du kannst es tun

::-webkit-scrollbar{ width: 0px; }


(gepostet für andere Personen, die von der Google-Suche auf dieses gestoßen sind!)

0
DardanM