Table의 폭이 디바이스 및 본문 가로 사이즈보다 더 넓을 때 마우스 휠 좌우 스코롤

HTML Table이 디바이스 및 화면 가로사이즈보다 더 넓을 때

위의 팁을 적용한 후 테이블 위에 마우스 휠 위치시 스코롤이 좌우로 이동되게 하는 스크립트

참고로 마우스의 위치가 테이블 밖이면 상하 스코롤 적용되며 모바일에서 좌우 스와이프 지원합니다.

 

<table class="bd_lst">

        ....

</table>

 

<script>
    $(function() {
      const tableWrapper = $('.bd_lst').parent();
      let isOverTable = false;
      let touchStartX = 0;
      let scrollStartX = 0;

      // PC 마우스 이벤트 핸들러
      $('.bd_lst').on('mouseenter', function() {
        isOverTable = true;
      }).on('mouseleave', function() {
        isOverTable = false;
      });

      tableWrapper.on('wheel', function(event) {
        if (isOverTable) {
          event.preventDefault();
          const delta = event.originalEvent.deltaY;
          $(this).scrollLeft($(this).scrollLeft() + delta);
        }
      });

      // 터치 이벤트 핸들러
      tableWrapper.on('touchstart', function(event) {
        touchStartX = event.originalEvent.touches[0].clientX;
        scrollStartX = $(this).scrollLeft();
        
        // 세로 스크롤은 기본 동작 허용
        if ($(this)[0].scrollWidth <= $(this).width()) {
          return;
        }
      });

      tableWrapper.on('touchmove', function(event) {
        // 가로 스크롤이 가능한 상태에서만 기본 동작 방지
        if ($(this)[0].scrollWidth > $(this).width()) {
          event.preventDefault();
          
          const touchCurrentX = event.originalEvent.touches[0].clientX;
          const touchDeltaX = touchStartX - touchCurrentX;
          
          $(this).scrollLeft(scrollStartX + touchDeltaX);
        }
      });

      // 스타일 적용
      tableWrapper.css({
        'overflow-x': 'auto',
        '-webkit-overflow-scrolling': 'touch', // iOS 부드러운 스크롤
        'overflow-y': 'hidden'  // 세로 스크롤 방지
      });

      // PC에서 커서 스타일
      $('.bd_lst').hover(
        function() {
          $(this).parent().css('cursor', 'grab');
        },
        function() {
          $(this).parent().css('cursor', 'default');
        }
      );

      // 모바일 터치 사용성 향상을 위한 부가 기능
      let scrollIndicator = $('<div class="scroll-indicator">').css({
        'position': 'absolute',
        'bottom': '0',
        'left': '0',
        'width': '0',
        'height': '3px',
        'background': 'rgba(0,0,0,0.3)',
        'transition': 'width 0.2s',
        'pointer-events': 'none'
      });

      tableWrapper.css('position', 'relative').append(scrollIndicator);

      // 스크롤 인디케이터 업데이트
      function updateScrollIndicator() {
        const scrollPercentage = (tableWrapper.scrollLeft() / 
          (tableWrapper[0].scrollWidth - tableWrapper.width())) * 100;
        scrollIndicator.css('width', scrollPercentage + '%');
      }

      tableWrapper.on('scroll', updateScrollIndicator);

      // 반응형 대응
      $(window).on('resize', function() {
        updateScrollIndicator();
      });

      // 초기 인디케이터 설정
      updateScrollIndicator();
    });
</script>

 

NO	내 용		정 보		비 고
1	도메인 정보	도메인명
		등록업체
		아이디
		비번
		신청일
2	호스팅 정보	업체명
		아이디
		비번
		신청일
3	홈관리자	아이디
		비번
4	Ftp 정보	주소
		아이디
		비번
5	DB 정보	Host명
		DB명
		아이디
		비번
6	금액
7	기타