CSS (или jQuery): как установить горизонтальную полосу прокрутки в среднее положение?

Question

Я работаю на веб-сайте, основной блок контента которого слишком широк, чтобы полностью поместиться на экранах меньшего разрешения.

Контент центрируется по центру экрана.

Мне нужна горизонтальная полоса прокрутки, чтобы отображаться, когда содержимое не помещается на экране.

Я заставляю горизонтальную полосу прокрутки появляться с div:

<div id="stretcher" style="width:1200px; min-width:1200px; height:1px; position:absolute; margin:0 auto"></div>

Проблема: если я сначала открою веб-сайт на экране с большим разрешением (или более широким окном), а затем сузу окно браузера, полоса прокрутки появится там, где и должна. Однако, если я продолжу делать окно более узким, ручка полосы прокрутки останется слева, и прокрутка влево станет невозможной. Кроме того, если окно браузера изначально меньше содержимого, полоса прокрутки отображается полностью влево, и я не могу прокрутить больше влево, чтобы показать левую сторону скрытого содержимого.

Вопрос: как я могу переместить скроллер в середину, чтобы я мог прокрутить влево, чтобы показать скрытую часть содержимого?

Буду благодарен за ваш совет!

Answer 1

После дня проб и ошибок я нашел свое собственное решение, во многом вдохновленное рекомендацией Джордана в его ответе на мой вопрос.Хотя мое решение отличается от предложенного Джорданом, но я в долгу перед ним, потому что он заставил меня задуматься в правильном направлении.

В общем, я стараюсь быть осторожным с предложениями людей о кардинальном изменении CSS.В данном конкретном случае об этом не могло быть и речи, поскольку компоновка моего сайта более сложна, чем в примере jsFiddle Джордана, а виды анимированных эффектов jQuery возможны только при использовании того позиционирования, которое я использовал.

Мое решение "клейкой ленты" заключалось в том, чтобы обернуть каждый элемент основного блока в отдельную обертку с центром в поле: 0 auto.Таким образом, мне не нужно было размещать div #access внутри #wrapper div (это было самой большой проблемой, потому что это испортило анимацию.)

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

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

Большое спасибо, Джордан!

Answer 2

JSFiddle моей демонстрации: http://jsfiddle.net/Y9DCs/

Из того, что я вижу, прямо сейчас у вас есть макет с двумя столбцами:

Слева находится ваша панель доступа, которая содержит ваше меню. Справа находится ваша основная область контента.

Я думаю, вам лучше иметь основной контейнер с 3 секциями:

|----------------wrapper---------------------|
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|  Menu   |       Content        |   Dummy   |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|         |                      |           |
|--------------------------------------------|

Затем можно задать ширину оболочки как Content + (2 * Меню) и указать для нее поле: 0 auto;

Меню и Dummy будут иметь одинаковую ширину, за исключением того, что dummy будет просто div без содержимого.

Это эффективно изменит размер всей области по центру на экране, при этом меню будет отображаться на левой стороне содержимого.

Answer 3

Вам просто нужно обернуть весь ваш контент в div, называемый main_wrapper или чем-то еще, и затем дать ему padding-left: 20px или что-то еще, что вам нравится