CSS滾動效果：溢出和位置問題

我試圖在純CSS中創建滾動效果，其中「頁面」相互之間出現/滑動，而不是像往常一樣移入和移出屏幕。CSS滾動效果：溢出和位置問題

我的意圖是有一個父元素是位置相對和溢出滾動。內部是包含「頁面」的「窗口」。窗口已隱藏溢出，並且頁面絕對位於父項的頂部，並具有相同的大小。

如果這可以按預期工作，那麼只有當窗口可見時才能看到頁面。

實際上，我只是在同一時間看到所有的頁面，而忽略了他們父類的溢出隱藏屬性，而他們遠離它的邊界。

我曾經在野外見過這種效果，但我不記得在哪裏以及如何。任何人都知道它是如何完成的？

的HTML：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>Newspaper Scroll Test</title> 
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> 
    <link rel="stylesheet" href="style.css" type="text/css"> 
</head> 
<body> 
    <div id="content"> 
     <div class="post"> 
      <h3>Test</h3> 
      <div> 
      lorem ipsum dolor sit amet. 
      </div> 
     </div> 
     <div class="post"> 
      <h3>Test</h3> 
      <div> 
      aap noot mies. 
      </div> 
     </div> 
     <div class="post"> 
      <h3>Testje</h3> 
      <div> 
      fietspomp 
      </div> 
     </div> 
     <div class="post"> 
      <h3>ttpttp</h3> 
      <div> 
      lorem ipsum dolor sit amet. 
      </div> 
     </div> 
    </div> 
</body> 
</html>

的CSS：

#content { 
height: 200px; 
width: 200px; 
overflow: auto; 
position: relative; 
} 

.post { 
overflow: hidden; 
height: 200px; 
} 

.post div { 
position: absolute; 
top: 50px; 
left: 0; 
} 

.post h3 { 
position: absolute; 
top: 0; 
left: 0; 
}

來源

2010-08-03 Pepijn

相信this is the effect你要去的。我給你的CSS代碼的修改主要是在.post類：

.post { 
    overflow: hidden; 

    position: absolute; 
    z-index: 1; 
    top: 50px; 
    left: 0; 

    height: 200px; 
    background: #fff; 
}

而不是設置嵌套.post div定位絕對的，我給自己定了整個.post絕對。這樣您可以堆疊每個內容帖子。我還添加了背景顏色，以便帖子不會透過對方顯示。

爲了得到一個不同的頁面顯示，你只需要改變它的z-index到一個較高的值大於1

或者，如果你想與堆疊一前一後的職位滾動效果，你可以更改CSS如下：

.post { 
    overflow: hidden;  
    height: 200px; 
    background: #fff; 
}

來源

2010-08-03 12:23:26 Pat

根本不是我想要的。這只是創建一堆帖子。我想用文字解釋非常複雜。這是一堆通過窗口顯示一次只顯示一個的帖子。這就是爲什麼郵政沒有定位和隱藏溢出。 .post將向下滾動，並在其滑入視圖時顯示它的內部（定位）部分。 – Pepijn 2010-08-03 13:36:39

根本不是我想要的。這只是創建一堆帖子。我想用文字解釋非常複雜。

Pepjin，是this你正在做什麼？

來源

2010-08-03 18:31:59 websea

不完全。理解我的意思的最好方法可能是意識到我很瞭解CSS，而且我的例子可能會起作用，如果只是溢出：hidden;將在絕對定位的元素上工作。隱藏的溢出應該防止顯示任何元素，除非.post與其子元素重疊。 – Pepijn 2010-08-04 10:30:57

CSS滾動效果：溢出和位置問題

回答

相關問題