css - 禁用页面的滚动功能

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 和主体的宽度和高度之外的任何内容都不会显示，而在 div2 中它将是可滚动的。

Answer 2

#div1, #div3
{
overflow: hidden;
}

#div2
{
overflow:scroll;
}

如果你想隐藏水平滚动使用：overflow-x:hidden和垂直使用overflow-y:hidden

Answer 3

你可以使用position: fixedin css。我的解决方案使正文可滚动。如果有人刷新页面，它会跳回到原来的位置，不确定溢出方法是否这样做。此外，这允许您将用户锚定到您的部分内容 ( <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; }

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