스크롤 기능을 유지하면서 스크롤 막대를 숨기려면 어떻게 해야 합니까?

스크롤 가능성을 유지하면서 스크롤 막대 숨기기

특정 시나리오에서는 스크롤을 허용하면서 웹 요소나 전체 웹 페이지에서 스크롤 막대를 숨길 수 있습니다. 마우스 휠이나 화살표 키를 통한 기능. 이를 달성하는 방법은 다음과 같습니다.

CSS를 사용하여 스크롤 막대 비활성화

스크롤 막대를 제거하려면 다음 CSS 속성을 적용하십시오.

overflow: hidden;

이렇게 하면 대상 요소의 스크롤 막대를 숨겨서 효과적으로 표시되지 않도록 합니다. 그러나 오버플로된 콘텐츠는 계속 액세스할 수 있습니다.

JavaScript로 스크롤 에뮬레이트

스크롤 기능을 복원하려면 이벤트 리스너를 마우스 휠 및 키다운 이벤트에 바인딩해야 합니다.

마우스 휠 스크롤

사용하기 아래에 표시된 JavaScript 또는 jQuery 플러그인을 사용하면 요소의 scrollTop 속성을 수정하여 스크롤을 에뮬레이트할 수 있습니다.

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

화살표 키 스크롤

화살표 키 스크롤을 지원하려면 바인딩 keydown 이벤트에 대한 이벤트 리스너:

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

이러한 기술을 구현하면 효과적으로 비활성화할 수 있습니다. 마우스 휠이나 화살표 키를 사용하여 스크롤 기능을 유지하면서 스크롤 막대를 사용할 수 있습니다.

위 내용은 스크롤 기능을 유지하면서 스크롤 막대를 숨기려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!