Прокрутите определенное содержимое DIV с помощью главной полосы прокрутки браузера

Я работаю над новым расположением своего сайта, и я сталкиваюсь с GIZMODO сайтом, я обнаружил, что сайт может использовать полосу прокрутки страницы для прокрутки части содержимого на сайте. Как они могут это сделать? Я изучил их CSS через Firebug, но я очень смущен.

Вот моя страница тестирования: http://raptor.hk/dev/theme/dummy.html (эта страница может центрировать содержимое, но не может прокручиваться, как я хочу)

Вот моя страница тестирования: http://raptor.hk/dev/theme/dummy2.html (эта страница может прокручиваться так, как я хочу, но не могу сосредоточиться)

Я просто хочу сделать страницу с прокруткой левой стороны с помощью полосы прокрутки страницы, но содержимое правой стороны остается в исходной позиции, плюс весь сайт должен выровнять центр, т.е. объединить мои страницы тестирования 1 и 2. Может ли кто-нибудь дать мне немного света?

ОТВЕТЫ

Ответ 1

Хотя ваш пример Gizmodo использует дополнительные скрипты для обработки (вертикальной полосы прокрутки) боковой панели (что даже не работает во всех браузерах), эффект вполне возможен с помощью чистого CSS, и это даже не так сложно, как это может показаться на первый взгляд.

Итак, вы хотите:

  • График с горизонтальной ориентацией, возможно расширенный или суженный для разных размеров окна браузера,
  • Основное содержимое слева, которое вертикально прокручивается основной полосой прокрутки браузера,
  • Боковая панель справа, которая прикрепляется к верхней части окна браузера, прокручивается отдельно от основного содержимого и отображается только ее полоса прокрутки при наведении курсора мыши. Когда прокручивается до конца боковой панели, полоса прокрутки окна берет верх.

Смотрите эту демонстрационную скрипту, которая делает все это.

Таблица стилей:

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

И разметка:

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

Протестировано на Win7 в IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

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

Update

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

Я думаю, что эта новая демонстрационная скрипта делает то, что вы хотите:

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>

Ответ 2

Вы можете сделать это с помощью position:fixed. Соответствующая часть из таблицы стилей GIZMODO:

#rightcontainer {
    position: fixed;
    margin-bottom: 10px;
    width: 300px;
    height: 100%;
    top: 0;
}

Ответ 3

Эта техника видна на многих веб-сайтах сегодня. То, что они делают, дает position: fixed для div в правой части экрана, поэтому на него не влияет прокрутка страницы.

CSS

body {
   position: relative;
}
#leftSide {
  width: 600px;
  ...rules ...
}

#rightSide {
   position: fixed;
   left: 610px;
}

HTML:

<body>
<div id="leftSide">
   affected by scrolling
</div>

<div id="rightSide">
  Not affected by scrolling
</div>
</body>

Ответ 4

Я неправильно понял ваш вопрос. Я думал, вы хотите, чтобы главная полоса прокрутки также прокручивала материал в другом div. Ну вот, вы идете:

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

Демо: http://jsfiddle.net/AlienWebguy/c3eAa/

Ответ 5

Я предполагаю, что вы ищете что-то вроде этого.

http://jsfiddle.net/RnWdh/

Обратите внимание, что вы можете изменить ширину #main_content по своему усмотрению, если она не пойдет за ваше фиксированное меню, поскольку текст исчезнет.

Трюк, чтобы получить фиксированное меню справа в контейнере с центрированием, использует left: 50% и margin-left для правильной настройки.

Например. У вас есть container -страница 960px и фиксированная ширина меню 300px, с left: 50%, справа от фиксированного меню будет свободное пространство (960/2 - 300 = 180), Затем просто отрегулируйте его с помощью margin-left: 180px;

Ответ 6

Один из способов "централизовать" страницу (т.е. контент + правая панель) - настраивать поля при фиксированном положении правой панели. Итак, если у вас есть div#content и div#rightPanel, css может выглядеть примерно так:

#content {
    margin-left: 15%;   /* left page margin */
    margin-right: 25%;  /* right page margin + rightPanel width */
}

#rightPanel {
    position: fixed;

    top: 0;
    right: 15%;  /* right page margin */
    width: 10%;
}

Просто убедитесь, что левое поле #content совпадает с правым краем #rightPanel.

Вот пример: http://jsfiddle.net/william/ZruS6/1/.