Comment désactiver les barres de défilement tout en gardant le défilement de la molette et des touches fléchées ?

Désactiver les barres de défilement tout en préservant la fonctionnalité de défilement des roues et des flèches

L'amélioration de l'expérience utilisateur en désactivant les barres de défilement tout en conservant la fonctionnalité de défilement essentielle peut être obtenue grâce à diverses techniques . Cet article explique comment y parvenir à l'aide de JavaScript brut et de jQuery.

JavaScript brut

Pour désactiver les barres de défilement en JavaScript brut, utilisez la propriété overflow: Hidden :

body {
  overflow: hidden;
}

Pour imiter le défilement avec la molette de la souris, liez l'événement wheel à une fonction qui ajuste le scrollTop value :

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

Pour la navigation avec les touches fléchées, liez l'événement keydown pour détecter les pressions sur les touches et ajustez scrollLeft et scrollTop en conséquence :

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 fournit des implémentations simplifiées pour ces concepts :

// 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...
    }
});

Conclusion

En employant ces techniques, les développeurs peuvent offrir une expérience utilisateur plus intuitive et visuellement attrayante en masquant les barres de défilement tout en permettant aux utilisateurs de naviguer dans le contenu en toute transparence.

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!