如何使内部DIV使用窗口滚动条？

Question

如何使内部DIV使用窗口滚动条？

13

我想在我的网页中使用一个 div，它不会占据整个屏幕，并可以通过屏幕边缘的滚动条来滚动内容。我知道这听起来很困惑，所以这里有一个例子：http://www.csszengarden.com/?cssfile=/202/202.css&page=1

我本来想贴代码，但是我不确定从哪里开始。有人可以指点我 HTML 和 CSS 的正确方向吗？

- tybro0103

2个回答

1

当div的周围始终固定时，BoltClock的答案很好，但是当您想要在页面上使用滚动条时，出现div（如模态对话框）时无法使用它。对于这种情况，您可以通过将此样式应用于body来禁用和隐藏页面滚动条：

body {overflow:hidden}

给出的 div 必须填满整个页面并具有滚动条：

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

现在，div滚动条出现在页面滚动条的位置，并且其内容可以滚动。

当div关闭时，必须重置body的overflow样式。

请查看此jsfiddle：http://jsfiddle.net/rahbari/kxoexa5s/。

- Ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

一个技巧是使用一个或多个静态图像或框进行覆盖，并固定它们的位置，然后调整整个页面中可滚动区域（即您的内部 <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's scrollbars.</p>
    <p>It was created as an illustration of <a href="https://dev59.com/A2435IYBdhLWcg3wfgMf#5383466">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>