如何更改单个元素的溢出，同时隐藏身体溢出？

下面的html应该基本上是左侧垂直排列的图像列表。我想让图片滚动，但我不想让页面的其余部分滚动。我也希望页面的其余部分有隐藏的溢出。无论如何，只要使用html和css来做到这一点，怎么做？如何更改单个元素的溢出，同时隐藏身体溢出？

HTML：

<!DOCTYPE html> 
<html> 
<title>Scrolling Pictures</title> 
<head> 
<link rel="stylesheet" type="text/css" href="scrollingPictures.css" /> 
</head> 
<body> 
<div id="scroll"> 
<img class="left" id="image1" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\bradBeachHeart.JPG" alt="Brad at the Lake"/> 

<img class="left" id="image2" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mariaNavi.jpg" alt="Making Maria Na'vi"/> 

<img class="left" id="image3" src="C:\Users\Shikamaru\Documents\Contwined Coding\Ravel\New Briefcase\images\mattWaterRun.jpg" alt="Photoshopped Matt"/> 
</div> 
</body> 
</html>

CSS：

body{ 
overflow:auto; 
margin-left:0; 
margin-top:0; 
} 
div#scroll{ 
border-right:1px solid orange; 
position:absolute; 
z-index:2; 
float:left; 
width:200px; 
overflow:auto; 
} 
.left{ 
z-index:inherit; 
float:left; 
width:200px; 
min-height:200px; /* for modern browsers */ 
height:auto !important; /* for modern browsers */ 
height:200px; /* for IE5.x and IE6 */ 
opacity:0.4; 
filter:alpha(opacity=40); 
} 
#image1, #image2, #image3{ 
width:200px; 
}

来源

2011-09-14 Marlon

只要给你的#scroll的100％的高度，你的body一个overflow: hidden：

body{ 
    overflow:hidden; 
    margin-left:0; 
    margin-top:0; 
} 
div#scroll{ 
    border-right:1px solid orange; 
    position:absolute; 
    z-index:2; 
    float:left; 
    width:200px; 
    overflow:auto; 
    height: 100%; 
} 
.left{ 
    z-index:inherit; 
    float:left; 
    width:200px; 
    min-height:200px; /* for modern browsers */ 
    height:auto !important; /* for modern browsers */ 
    height:200px; /* for IE5.x and IE6 */ 
    opacity:0.4; 
    filter:alpha(opacity=40); 
} 
#image1, #image2, #image3{ 
    width:200px; 
}

http://jsfiddle.net/QcHNu/

来源

2011-09-14 00:45:53

谢谢！现在我要开始设计滚动条的样式。我真的希望该div根据鼠标的位置自动滚动，但我知道这需要一些JavaScript。非常感谢！！ – Marlon

如何更改单个元素的溢出，同时隐藏身体溢出？

回答

相关问题