Как настроить полосу прокрутки браузера для прокрутки части страницы? - PullRequest
Новая
       22

Как настроить полосу прокрутки браузера для прокрутки части страницы?

6 голосов
/ 17 сентября 2008

Я видел это на нескольких сайтах, например artofadambetts.com Полоса прокрутки на странице прокручивает только элемент страницы, а не всю страницу. Я посмотрел на источник и пока не смог понять. Как это сделать?

Ответы [ 11 ]

9 голосов
/ 17 сентября 2008

Это довольно изящно. Он использует «position: fixed» на большинстве div, а тот, который прокручивает, - тот, у которого его нет.

4 голосов
/ 17 сентября 2008

Фактически, это не часть прокрутки, которая «выполняет работу», это фиксированная часть страницы.

Чтобы сделать это, вы должны использовать CSS и добавить свойство position: fixed; (используйте его со свойствами top, bottom, left и / или right) к элементам, которые вы не хотите прокрутки.

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

1 голос
/ 17 сентября 2008

Вы можете использовать фиксированное или абсолютное позиционирование, чтобы привязать различные элементы к фиксированным позициям на странице. В качестве альтернативы вы можете указать элемент фиксированного размера (например, DIV) и использовать overflow: scroll для принудительной установки полос прокрутки.

Как уже упоминалось, чтобы все работало в Internet Explorer и Firefox / Opera / Safari, требуется разумное использование хаков.

1 голос
/ 17 сентября 2008

Следует отметить, что без дальнейших взломов фиксированная позиция не работает для IE6, которому все еще удается удерживать 15-30% рынка, в зависимости от вашего сайта.

1 голос
/ 17 сентября 2008

Чтобы узнать, как люди делают такие вещи в CSS и / или Javascript, инструмент Firebug просто замечательный:

Аддон Firebug для Firefox

0 голосов
/ 29 ноября 2011

Попробуйте это для прокрутки определенной части веб-страницы ...... 

 <html>
      <head>
      <title>Separately Scrolled Area Demo</title>
        </head>
          <body>
              <div style="width: 100px; border-style: solid">

            <div style="overflow: auto; width: 100px; height: 100px">
                        sumit..................
                        amit...................
                        mrinal.................
                        nitesh................
                        maneesh................
                        raghav...................
                        hitesh...................
                        deshpande................
                        sidarth....................
                        mayank.....................
                        santanu....................
                        sahil......................
                        malhan.....................
                        rajib.....................
                         </div>
                      </div>
                  </body>
      </html>
0 голосов
/ 17 сентября 2008

Они установили для боковых и верхних элементов фиксированные позиции через CSS (см. Строку 94 их файла style.css). Это удерживает их в окне просмотра, в то время как остальные прокручивают.

0 голосов
/ 17 сентября 2008

Браузер - это , прокручивающий страницу, просто его часть зафиксирована на месте.

Это делается с помощью CSS-свойства position: fixed на части, которую вы не хотите прокручивать.

0 голосов
/ 17 сентября 2008

Это можно сделать в CSS, используя «position: absolute;» пункт

Вот пример шаблона:

http://www.demusdesign.com/bipolar/index.html

С http://www.demusdesign.com/

0 голосов
/ 17 сентября 2008

Для div вы можете добавить в cSS 

overflow: auto

Например, 

<div style="overflow:auto; height: 500px">Some really long text</div>

Изменить: После просмотра сайта, который вы разместили, вы, вероятно, не хотите этого. На своем веб-сайте он делает макет фиксированным (position: fixed) и присваивает ему более высокий z-индекс, чем тексту, что ниже z-index.

Например: 

<div class="highz"> //Put random stuff here. it'll be fixed </div>
<div class="lowz"> Put stuff here you want to scroll and position it.&lt/div>

с файлом CSS 

div.highz {position: fixed; z-index: 2;}
div.lowz {position: fixed; z-index: 1;}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...