Отзывчивое горизонтальное скольжение страницы

Проблема

Разработка адаптивной горизонтальной навигационной системы сопряжена с несколькими проблемами:

• Поддержание страницы видимость в области просмотра
• Предотвращение пробелов или перекрытий между страницы
• Разрешение страниц, высота которых превышает 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 обеспечивает совместимость с широким спектром браузеров.