如何更改單個元素的溢出，同時隱藏身體溢出？

下面的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

如何更改單個元素的溢出，同時隱藏身體溢出？

回答

相關問題