Независимая прокрутка страниц в горизонтальной схеме перехода

Question

Я создаю сайт (html/css/jquery) с горизонтальной компоновкой перехода, вот пример: http://codepen.io/anon/pen/eqBGb. На самом деле это единственный div, перемещающийся к указанным идентификаторам.

Моя проблема заключается в том, что, поскольку это единственный div, он всегда имеет одинаковую высоту и всегда переполняется, даже если у меня есть только одна страница (id) с большим количеством текста.

Как я могу достичь этого окончательного результата http://imakewebthings.com/jquery-waypoints/, в котором каждая страница имеет независимую величину прокрутки?

Answer 1

http://codepen.io/anon/pen/cpBfI

Вы должны заставить "высота: 100%;" на каждом элементе до .contentbox включительно, поэтому он будет единственным элементом, содержимое которого переполняется (поскольку только он может иметь размеры более 100%). После этого .contentbox должен иметь автоматическое переполнение, поэтому он может иметь свою собственную полосу прокрутки, когда ее содержимое больше, чем элемент, который имеет размеры экрана.

редактировать: http://codepen.io/anon/pen/tcDGr

Вы все еще были проблемы с навигационной панели. Это не должно быть исправлено в этом дизайне, потому что все тело вообще не движется. Сделать здесь положение абсолютным лучше. Тем не менее, контент находится под ним.

Мое решение включает настройку верхнего заполнения .contentbox-wrapper на размер навигатора и применение надлежащего box-sizing, чтобы оно было полностью на высоте 100%.