휠 및 화살표 키 스크롤을 유지하면서 스크롤바를 비활성화하는 방법은 무엇입니까?

휠 및 화살표 스크롤 기능을 유지하면서 스크롤 막대 비활성화

다양한 기술을 통해 필수 스크롤 기능을 유지하면서 스크롤 막대를 비활성화하여 사용자 경험을 향상할 수 있습니다. . 이 기사에서는 원시 JavaScript와 jQuery를 사용하여 이를 수행하는 방법을 살펴봅니다.

원시 JavaScript

원시 JavaScript에서 스크롤 막대를 비활성화하려면 Overflow:hidden 속성

을 활용하세요.

body {
  overflow: hidden;
}

마우스 휠로 스크롤하는 것을 모방하려면 휠 이벤트를 scrollTop을 조정하는 함수에 바인딩하세요. 값:

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

화살표 키 탐색의 경우 keydown 이벤트를 바인딩하여 키 누름을 감지하고 그에 따라 scrollLeft 및 scrollTop을 조정합니다.

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는 이러한 항목에 대한 단순화된 구현을 제공합니다. 개념:

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

결론

개발자는 이러한 기술을 사용하여 사용자가 콘텐츠를 탐색할 수 있도록 하면서 스크롤 막대를 숨겨 더욱 직관적이고 시각적으로 매력적인 사용자 경험을 제공할 수 있습니다. 원활하게.

위 내용은 휠 및 화살표 키 스크롤을 유지하면서 스크롤바를 비활성화하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!