반응형 수평 페이지 슬라이딩

문제

반응형 수평 탐색 시스템을 설계하는 데는 몇 가지 과제가 있습니다.

• 페이지 유지 관리 뷰포트 내 가시성
• 사이의 간격이나 겹침 방지 페이지
• 스크롤바 표시와 함께 높이가 100% 이상으로 확장되는 페이지 허용
• Internet Explorer 9 이상과의 호환성 보장

해결책

이 솔루션은 jQuery를 사용하며 다음과 같은 주요 기능을 포함합니다:

1. 반응형 크기 조정: 스크립트는 페이지 수를 기준으로 래퍼의 전체 너비를 계산하여 반응형 크기 조정을 보장합니다.
2. 부드러운 전환: 탐색 링크를 클릭하면 래퍼의 왼쪽 여백이 부드럽게 애니메이션됩니다. 갑작스러운 점프 없이 페이지 간 전환.
3. 동적 높이 처리: 페이지는 다음 이상으로 확장될 수 있습니다. 높이가 100%이고 필요할 때 스크롤바가 나타나 불필요한 공백을 제거합니다.
4. 활성 링크 표시: 선택한 탐색 링크가 강조 표시되어 현재 페이지 위치를 나타냅니다.
5. IE 호환성: 코드는 Internet Explorer 9 이상과 호환됩니다.

코드 구현

$(document).ready(function() {
  var slideNum = $('.page').length,
    wrapperWidth = 100 * slideNum,
    slideWidth = 100 / slideNum;
  $('.wrapper').width(wrapperWidth   '%');
  $('.page').width(slideWidth   '%');

  $('a.scrollitem').click(function() {
    $('a.scrollitem').removeClass('selected');
    $(this).addClass('selected');

    var slideNumber = $($(this).attr('href')).index('.page'),
      margin = slideNumber * -100   '%';

    $('.wrapper').animate({
      marginLeft: margin
    }, 1000);
    return false;
  });
});

CSS

html,
body {
  height: 100%;
  margin: 0;
  overflow-x: hidden;
  position: relative;
}

nav {
  position: absolute;
  top: 0;
  left: 0;
  height: 30px;
}

.wrapper {
  height: 100%;
  background: #263729;
}

.page {
  float: left;
  background: #992213;
  min-height: 100%;
  padding-top: 30px;
}

#page-1 {
  background: #0C717A;
}

#page-2 {
  background: #009900;
}

#page-3 {
  background: #0000FF;
}

a {
  color: #FFF;
}

a.selected {
  color: red;
}

.simulate {
  height: 2000px;
}

결론

이 코드 조각은 반응형 수평 페이지 탐색을 위한 포괄적인 솔루션을 제공하여 명시된 요구 사항을 효율적으로 해결합니다. 유연성 덕분에 동적 탐색 메뉴가 가능하고 스크롤 막대가 있는 긴 페이지를 수용할 수 있습니다. 또한 Internet Explorer 9과의 호환성으로 다양한 브라우저와의 호환성을 보장합니다.