Wie kann ich Bildlaufleisten ausblenden und gleichzeitig die Bildlauffunktion beibehalten?

Bildlaufleisten ausblenden und gleichzeitig die Bildlauffähigkeit beibehalten

In bestimmten Szenarien möchten Sie möglicherweise Bildlaufleisten von Webelementen oder der gesamten Webseite ausblenden und dennoch das Scrollen zulassen Funktionalität über das Mausrad oder die Pfeiltasten. So können Sie dies erreichen:

Bildlaufleisten mithilfe von CSS deaktivieren

Um Bildlaufleisten zu entfernen, wenden Sie die folgende CSS-Eigenschaft an:

overflow: hidden;

Dies wird Blenden Sie Bildlaufleisten für das Zielelement aus und verhindern Sie so effektiv, dass sie angezeigt werden. Auf übergelaufene Inhalte kann jedoch weiterhin zugegriffen werden.

Bildlauf mit JavaScript emulieren

Um die Bildlauffunktionen wiederherzustellen, müssen Sie Ereignis-Listener an Mausrad- und Tastendruck-Ereignisse binden.

Mausrad-Scrollen

Verwendung von JavaScript oder dem gezeigten jQuery-Plugin Unten können Sie das Scrollen emulieren, indem Sie die scrollTop-Eigenschaft des Elements ändern:

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

Pfeiltasten-Scrollen

Um das Scrollen mit den Pfeiltasten zu unterstützen, binden Sie einen Ereignis-Listener an die Taste „keydown“. Ereignis:

$(document).keydown(function(event) {
  const{ scrollTop, scrollLeft } = $("#example");
  switch (event.keyCode) {
    case 37: // Left arrow
      $("#example").scrollLeft(scrollLeft - 10);
      break;
    case 38: // Up arrow
      $("#example").scrollTop(scrollTop - 10);
      break;
    case 39: // Right arrow
      $("#example").scrollLeft(scrollLeft + 10);
      break;
    case 40: // Down arrow
      $("#example").scrollTop(scrollTop + 10);
      break;
  }
});

Durch die Implementierung dieser Techniken können Sie Bildlaufleisten effektiv deaktivieren und gleichzeitig die Bildlauffunktionalität mit der Maus beibehalten Rad- oder Pfeiltasten.

Das obige ist der detaillierte Inhalt vonWie kann ich Bildlaufleisten ausblenden und gleichzeitig die Bildlauffunktion beibehalten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!