Comment puis-je masquer les barres de défilement tout en conservant la fonctionnalité de défilement ?

Masquer les barres de défilement tout en conservant la capacité de défilement

Dans certains scénarios, vous souhaiterez peut-être masquer les barres de défilement des éléments Web ou de la page Web entière tout en autorisant le défilement. fonctionnalité via la molette de la souris ou les touches fléchées. Voici comment y parvenir :

Désactiver les barres de défilement à l'aide de CSS

Pour éliminer les barres de défilement, appliquez la propriété CSS suivante :

overflow: hidden;

Cela permettra masquer les barres de défilement de l’élément ciblé, les empêchant ainsi d’apparaître. Cependant, le contenu débordé sera toujours accessible.

Émuler le défilement avec JavaScript

Pour restaurer les capacités de défilement, vous devez lier les écouteurs d'événements aux événements de molette de la souris et de frappe.

Défilement de la molette de la souris

Utilisation de JavaScript ou du plugin jQuery affiché ci-dessous, vous pouvez émuler le défilement en modifiant la propriété scrollTop de l'élément :

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

Défilement des touches fléchées

Pour prendre en charge le défilement des touches fléchées, liez un écouteur d'événement à la touche enfoncée event :

$(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;
  }
});

En implémentant ces techniques, vous pouvez désactiver efficacement les barres de défilement tout en préservant la fonctionnalité de défilement à l'aide de la molette de la souris ou touches fléchées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!