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

Ответ 1

Горизонтальное скольжение по страницам

с лево-маржинальной анимацией

Этот фрагмент jQuery:

• Вычисляет количество слайдов и соответственно устанавливает ширину обертки.
• В зависимости от того, какая ссылка нажата, left-margin анимируется на обертке, чтобы показать соответствующий слайд с плавным переходом
• Переключает класс ссылки на ссылку для выделения активной ссылки.

Обратите внимание, что это решение:

• Используется только одно меню для минимизации разметки и предотвращения повторения содержимого.
• Требуется только библиотека jQuery
• работает для динамического числа слайдов

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

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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="wrapper">
  <nav>
    <a href="#page-1" class="scrollitem selected">page 1</a>
    <a href="#page-2" class="scrollitem">page 2</a>
    <a href="#page-3" class="scrollitem">page 3</a>
  </nav>
  <div id="page-1" class="page">
    <h3>page 1</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-2" class="page">
    <h3>page 2</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
  <div id="page-3" class="page">
    <h3>page 3</h3>
    <div class="simulate">Simulated content heigher than 100%</div>
  </div>
</div>

Ответ 2

"по мере того, как вы масштабируетесь, ему нужно придерживаться страницы, а не показывать другие"

Чтобы достичь этого, сохраните ссылку на текущий элемент страницы, а затем выполните прокрутку без задержки. Этот элемент будет изменен при изменении размера окна:

var currentPage; //here is where we will hold the reference
jQuery('a.scrollitem').click(function () {
    var targetPage = $(jQuery(this).attr('href'));
    jQuery('a.scrollitem').removeClass('selected');
    jQuery(this).addClass('selected');
    jQuery('.toggle').css({'display':'none'});
    jQuery('.wrapper').scrollTo(targetPage, 1200, function(){
        jQuery('.toggle').css({'display':'block'});
    });
    currentPage = targetPage; //here is where we set the reference
    return false;
});

//and here we do a no-delay scrollTo
$(window).resize(function(){
    if(!!currentPage){
        console.log('window resized.  scrolling to: ', currentPage.attr('id'));
        jQuery('.wrapper').scrollTo(currentPage);
    }
});

Это делает его довольно отзывчивым, на мой взгляд.

страницы должны быть длинными (800 пикселей) и все еще прокручиваемыми, без пробелов на последнем.

Чтобы избавиться от этого пробела, я просто делаю все page немного дольше, чем нужно. Прокрутка не зависит от этого, поскольку страницы выравниваются по левому краю с помощью left:0;. Я подозреваю, что на других страницах был такой же пробел и что пробелы на этих страницах были покрыты полосой прокрутки.

.page {
    width: 110%;
}

должен работать на минимум ie9

Боюсь, я не могу помочь в этом отношении; У меня установлен только IE11. Но эй, он отлично работает в IE11.

Рабочая скрипка