Question

有3个div，彼此并排。

所以div1 div2 div3

有没有办法只将焦点集中在div2上？这样当用户'只在div2上滚动'时，总会看到div1和div3的内容？

如果可能，最好是css解决方案。如果没有，可能有哪些解决方案？

Answer 1

添加以下css：

body, #div1, #div3
{
 overflow:hidden;
}
#div2
{
 overflow-y:scroll;
}

请注意，您需要为元素设置宽度和高度，并且不会显示超出div1，div3和body的宽度和高度的任何内容，而在div2中它将是可滚动的。

Answer 2

#div1, #div3
{
overflow: hidden;
}

#div2
{
overflow:scroll;
}

如果要隐藏水平滚动使用：overflow-x:hidden，垂直使用overflow-y:hidden

Answer 3

您可以在css中使用position: fixed。我的解决方案使身体可滚动。如果有人刷新页面，它会跳回到原来的位置，不确定overflow-method是否会这样做。此外，这允许您使用内容的部分内容（<a href="#someId"></a>）

这是一份快速草案：

<div id="divWrap">
    <div id="div1">1</div>
    <div id="div2">2</div>
    <div id="div3">3</div>
</div>

/* This wrapper places content centered in the page, the relative is important */
#divWrap{
    position: relative;
    margin: 0 auto;
    width: 500px;
}
/* Place this one fixed, top, left */
#div1{
    position: fixed;
    left: 0;
    top: 0;
    width: 100px;
}
/* This div acts normal */   
#div2{
    margin: 0 100px 0 200px; /* margins => the widths of 1 & 2 */
    width: 200px;
}
/* Place this one fixed, top, right */
#div3{
    position: fixed;
    right: 0;
    top: 0;
    width: 200px;
}

Answer 4

您可以修复第一个和最后一个div的位置，因此只有中心div会滚动;

HTML

<div class="l">left</div>
<div class="m">middle</div>
<div class="r">right</div>

CSS：

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.l, .r {
    width: 33%;
    height: 100%;
    position: fixed;
    background: lightgreen;
    top: 0;
}
.l { left: 0; }
.r { right: 0; }
.m {
    margin: 0 33%;
    min-height: 100%;
    background: lightblue;
}

同时检查此JSFiddle。

Answer 5

嗯，你的意思是div1和div3固定在页面上，这意味着滚动时只滚动div2？如果是这样的话，比如

HTML

<div class="container">
    <div class="div-one"></div>
    <div class="div-two"></div>
    <div class="div-thee"></div>
</div>

CSS

.container { position: relative; }
.div-one, .div-two { position: fixed; }

这不会起作用，但你明白了。

禁用页面的滚动功能

5 个答案: