Как сделать внутреннюю панель прокрутки окна div?

Ответ 1

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

Я проиллюстрировал это демонстрационная страница. Однако это связано с дополнительной разметкой по моему предложению; Я бы сделал ставку на то, что более сложный CSS используется для достижения такого же эффекта с той же базовой разметкой, предоставляемой CSS Zen Garden, но мой ответ - еще один более простой способ обойти это.

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

body {
    margin: 0;
}

h1 {
    text-align: center;
}

#overlay div {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: gray;
}

/* The top and bottom "borders". */
#overlay .vert {
    height: 150px;
}

/* The left and right "borders". */
#overlay .hor {
    width: 300px;
}

/* Anchor the parts of your overlay boxes to the respective edges of the page. */
#overlay-top { top: 0; }
#overlay-bottom { bottom: 0; }
#overlay-left { left: 0; }
#overlay-right { right: 0; }

/* Your content has padding equal to the sizes of your overlay "borders". */
#content {
    padding: 150px 300px;
}

<!-- This acts as the overlay, or mask, of your content. -->
<div id="overlay">
    <div id="overlay-top" class="vert"></div>
    <div id="overlay-bottom" class="vert"></div>
    <div id="overlay-left" class="hor"></div>
    <div id="overlay-right" class="hor"></div>
</div>

<!-- The entire content of your page would go here. -->
<div id="content">
    <h1>Top of content</h1>
    <hr>
    <p>This is a demonstration of the effect of scrolling a small content area in a page using the window scrollbars.</p>
    <p>It was created as an illustration of <a href="http://stackoverflow.com/a/5383466/106224">this CSS answer on Stack Overflow</a>.</p>
    <hr>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. No vix everti corpora corrumpit, et mea exerci ponderum eloquentiam, vis an idque nominati. Ea mel errem conclusionemque, cu sea dicat omnesque. Facilis detracto reprehendunt mei ei.</p>
    <p>Vim aperiam suscipit ne, et has euismod senserit, est ei ornatus mnesarchum. His delicata referrentur ad, vim an sapientem molestiae laboramus, ad quem clita consequuntur ius. Pro ei sint voluptatibus. Elaboraret definitionem per cu, liber deserunt interpretaris ad duo, cu vis petentium vulputate. His at vide patrioque, in labitur alterum sea.</p>
    <p>Putent mentitum referrentur no usu. Ne autem eripuit delectus mei, forensibus persequeris vim eu, sint quaestio ad nec. Offendit aliquyam ius ex. Ex cum option noluisse. Repudiare suscipiantur est ut.</p>
    <p>Ut vero scripta argumentum per, id nemore splendide appellantur vis. Et idque aliquam praesent nec. At wisi impetus deseruisse per, salutatus omittantur ex has. No sed accusata iudicabit, eu corrumpit deseruisse eos, et vis dictas suavitate. Ad quod abhorreant dissentias duo, ius ea quando eruditi nusquam.</p>
    <p>Eos autem debet ut, vel ea omnium dolorum eligendi. Ex has magna assum iudico. Eu dictas hendrerit vis, animal dissentiunt mel cu. Cu usu nemore interesset temporibus. Mea ut adipisci praesent consequuntur, per et brute legimus commune. Pri eirmod dissentiunt ei.</p>
    <p>In nonumy nostro invenire cum. Postea complectitur sit id. An saepe animal omittam usu, quem tantas id est, nam sint deleniti in. Dicit viderer reformidans ut quo. Mei ornatus molestie ut, id dolores vivendum menandri ius. Facer possim reformidans vix ut. Et utinam possim percipitur quo.</p>
    <p>Nisl perpetua voluptaria vim et, cu per unum efficiendi, no labore instructior pri. In usu delenit intellegam, at delicata praesent eos. Cu civibus mentitum duo. Eu movet dolor vim, has cu senserit referrentur. An mel corpora comprehensam, constituto vituperata cum eu.</p>
    <p>Ne vim nemore vidisse rationibus. Id partem percipit quaerendum mel. Soleat graecis placerat cu eum, sed at dolores recteque. In sit consul appetere, cum exerci legere accommodare ad. Cum at legimus patrioque neglegentur.</p>
    <p>No alii aeque facilisis mea, his novum dissentias id. Ne his exerci feugait, mei te suas graeci iracundia. Ad paulo soluta vim, discere qualisque his eu. Ius ut fuisset offendit inciderint, mel putant impetus appellantur no. Sit ad integre officiis euripidis, libris necessitatibus at per. Tamquam insolens an duo, sed exerci electram ad, qui at doming inciderint adversarium.</p>
    <p>Cum ex ornatus accusam, vocent dolorem definiebas sit et, ut illud takimata mei. Eos ex sale brute, bonorum mediocrem an nam. Ei alienum quaestio maiestatis has, iriure vivendo cu est, pri harum periculis ex. Per ad idque populo omnesque, novum reformidans definitionem eu nec. Mel reque evertitur voluptatum ea, inani iuvaret sententiae et has.</p>
    <hr>
    <h1>Bottom of content</h1>
</div>

Ответ 2

Ответ BoltClock хорош, когда окружение div всегда фиксировано, но если вы хотите использовать полосы прокрутки страницы, когда div (например, модальный диалог) появляется "на лету", он не может использоваться.

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

body {overflow:hidden}

Данный div должен заполнить всю страницу и иметь полосы прокрутки:

div {position:fixed; top:0; left:0; width:100%; height:100%; overflow-y:scroll}

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

когда div закрыт, стиль переполнения тела должен быть reset.

посмотрите на этот jsfiddle: http://jsfiddle.net/rahbari/kxoexa5s/