有3个div,彼此并排。
所以div1 div2 div3
有没有办法只将焦点集中在div2上?这样当用户'只在div2上滚动'时,总会看到div1和div3的内容?
如果可能,最好是css解决方案。如果没有,可能有哪些解决方案?
答案 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; }
这不会起作用,但你明白了。