Wie deaktiviere ich Bildlaufleisten, während ich weiterhin mit dem Rad und der Pfeiltaste scrolle?

Deaktivieren von Bildlaufleisten unter Beibehaltung der Scroll-Funktionalität mit Rad und Pfeil

Eine Verbesserung des Benutzererlebnisses durch Deaktivieren von Bildlaufleisten bei gleichzeitiger Beibehaltung wesentlicher Bildlauffunktionen kann durch verschiedene Techniken erreicht werden . In diesem Artikel wird erläutert, wie Sie dies mit unformatiertem JavaScript und jQuery erreichen.

Unformatiertes JavaScript

Um Bildlaufleisten in unformatiertem JavaScript zu deaktivieren, verwenden Sie die Eigenschaft overflow:hidden:

body {
  overflow: hidden;
}

Um das Scrollen mit dem Mausrad nachzuahmen, binden Sie das Radereignis an eine Funktion, die scrollTop anpasst Wert:

document.body.addEventListener("wheel", function (e) {
  document.body.scrollTop += e.deltaY;
});

Für die Pfeiltastennavigation binden Sie das Keydown-Ereignis, um Tastendrücke zu erkennen und scrollLeft und scrollTop entsprechend anzupassen:

document.body.addEventListener("keydown", function (e) {
  switch (e.keyCode) {
    case 37: // Left arrow
      document.body.scrollLeft -= 10;
      break;
    // Implement other arrow key cases...
  }
});

jQuery

jQuery bietet hierfür vereinfachte Implementierungen Konzepte:

// Disable scrollbars
$("body").css("overflow", "hidden");

// Mouse wheel scrolling
$("#example").bind("mousewheel", function (ev, delta) {
    $(this).scrollTop($(this).scrollTop() - Math.round(delta));
});

// Arrow key scrolling
$("body").keydown(function (e) {
    switch (e.keyCode) {
        case 37: // Left arrow
            $(this).scrollLeft($(this).scrollLeft() - 10);
            break;
        // Implement other arrow key cases...
    }
});

Fazit

Durch den Einsatz dieser Techniken können Entwickler eine intuitivere und optisch ansprechendere Benutzererfahrung bieten, indem sie Bildlaufleisten verbergen und Benutzern gleichzeitig die Navigation durch Inhalte ermöglichen nahtlos.

Das obige ist der detaillierte Inhalt vonWie deaktiviere ich Bildlaufleisten, während ich weiterhin mit dem Rad und der Pfeiltaste scrolle?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!