禁用页面的滚动功能

时间:2013-08-22 13:36:08

标签: css

有3个div,彼此并排。

所以div1 div2 div3

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

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

5 个答案:

答案 0 :(得分:1)

添加以下css:

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

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

答案 1 :(得分:1)

#div1, #div3
{
overflow: hidden;
}

#div2
{
overflow:scroll;
}

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

答案 2 :(得分:0)

您可以在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;
}

答案 3 :(得分:0)

您可以修复第一个和最后一个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

答案 4 :(得分:0)

嗯,你的意思是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; }

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