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

Question

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

0

Глядя на попытку установить страницу вверх, где html overflow: hidden а верхний и нижний колонтитулы фиксированы, а содержимое тела overflow: scroll.

Текущая проблема заключается в том, что полоса прокрутки отображается в содержимом div. Можно ли установить "основную" полосу прокрутки браузера для взаимодействия с содержимым div?

Revalent CSS:

html {
   overflow: hidden;
}
header {
   position: fixed;
   width: 100%;
   height: 15%;
}
footer {
   position: fixed;
   width: 100%;
   bottom: 10%;
   height: 5%;
}
#content {
   position: fixed;
   height: 80%;
   max-width: 960px;
   margin: 0 auto;
   overflow: scroll;
}

Вот понятие: http://jsfiddle.net/6gcfx/ (имейте в виду, что это не основная полоса прокрутки, которая перемещает содержимое по желанию).

user3097838 13 дек. 2013, в 04:30

Источник

0

Вы говорите, что у вас есть body{overflow:scroll} , но я его не вижу (кстати, есть два html{overflow:hidden} ). Неясно, что вы спрашиваете
Zach Saucier 13 дек. 2013, в 03:08
0

Извините, снова скопировал html вместо свойств заголовка. По сути, я хотел бы, чтобы контент был единственным элементом экрана, который прокручивается. Верхний и нижний колонтитулы останутся фиксированными.
user3097838 13 дек. 2013, в 03:17
0

Создана скрипта JS для демонстрации концепции: jsfiddle.net/6gcfx
user3097838 13 дек. 2013, в 04:48

Показать ещё 1 комментарий

Теги:

html

css

2 ответа

Ещё вопросы

Вы говорите, что у вас есть body{overflow:scroll} , но я его не вижу (кстати, есть два html{overflow:hidden} ). Неясно, что вы спрашиваете
Извините, снова скопировал html вместо свойств заголовка. По сути, я хотел бы, чтобы контент был единственным элементом экрана, который прокручивается. Верхний и нижний колонтитулы останутся фиксированными.
Создана скрипта JS для демонстрации концепции: jsfiddle.net/6gcfx

Zach Saucier · Answer 1 · 2013-12-13T12-45-00.000Z

Если вы используете процентную высоту (как в своем вопросе), вы можете сделать это таким образом, используя position:fixed на верхнем и нижнем колонтитуле и position:absolute на теле

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:15%;
    width: 100%;
    background: #ccc;
}
#content {
    overflow: scroll;
    height: 70%;
}
footer {
    position: fixed;
    bottom:0%;
    height:15%;
    width: 100%;
    background: #ccc;
}

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

html { overflow: hidden; }
header {
    position: fixed;
    top: 0;
    height:75px;
    width: 100%;
    background: #ccc;
}
#content {
    position:absolute;
    top:75px; /* Height of header */
    overflow: scroll;
    height: calc(100% - 125px); /* 100% - (headerHeight + footerHeight) */
}
footer {
    position: fixed;
    bottom:0%;
    height:50px;
    width: 100%;
    background: #ccc;
}

SusuReedJango · Answer 2 · 2013-12-13T00-21-00.000Z

Простите мою новизну, но я думаю, что вижу вашу проблему. Переключите свой контент в div

#content {
position:float;
top:(header size);

И переключите верхний и нижний колонтитулы на

position:fixed;

Таким образом, содержимое должно прокручиваться со строкой прокрутки страницы, а верхний/нижний колонтитул невозможен.

Я думаю, что вы понимаете проблему, к сожалению, нет position: float; свойство. w3schools.com/cssref/pr_class_position.asp
Я использую это все время, но тогда используйте float: center? Если это не сработает, поместите ваш основной контент в float: влево / вправо в пустую позицию: абсолютный заполнитель.
@SusuReedJango Поплавка тоже нет float:center