非常棘手的CSS滾動問題

我不知道如何在CSS中實現某種效果。我有以下HTML：非常棘手的CSS滾動問題

<div id="container" name="container"> 
    <div id="scroll" name="scroll"></div> 
</div>

滾輪負載與具有的寬度卷軸內的一個圖像：715px;

[[1]]

當用戶點擊該圖像上，第二圖像動態地是附加到第一個：

[[1] [2]]

而且，單擊第二個的時候，同樣的事情發生（等）：

[1] [2] [3]

現在，這裏是我需要一些幫助。當點擊最後一個可見圖像時，系列被點擊，前面的圖像應該滾動到左側爲新的圖像騰出空間，首先將的視圖放在最後，然後將新圖像放在最後：

[[2] [3] [4]]
< -------------->

這就是無限期地 - 每個所述最終圖像被點擊之前的時間應該滾動到左側，將新圖像放在DIV中最右側視圖的處。

[3] [4] [5]
< -------------->

我有玩過下面的CSS（你看到的是什麼我最近嘗試的狀態）。我能夠實現的是：

1）當第四個圖像超過715px標記時，圖像連續生成，然後溢出（向右）。不是我想要的。

2）下面的CSS「是否」做我想做的（在某種程度上） - 它開始對的DIV左邊，然後工作到715px標記，並開始對圖像（向後）推到左並且在視野之外 - 總是將最近的圖像放在DIV的最右側並且在視野中。這個問題是，該命令是FL（我認爲，由於RTL）。我試圖把它與文本對齊：左，但似乎並沒有做任何事情。

任何想法？建議感激。謝謝。

#container 
{ 
    width: 715px; 
    height: 228px; 
    overflow: hidden; 
    position:relative; 
    /* text-align:left; */ 
} 

#scroll 
{ 
    height: 228px; 
    white-space: nowrap; 
    direction: rtl; 
    /* text-align:left; */ 

}

來源

2009-09-25 Code Sherpa

可能對http://doctype.com /你會得到更好的幫助 – 2009-09-25 03:44:58

謝謝。我創建了一個帳戶，並在那裏張貼我的問題。但是，如果有人知道答案......請幫忙！ – 2009-09-25 04:00:51

你如何添加動態行爲？用僞類或js？ – Anthony 2009-09-25 06:03:34

我做了一個demo page。它適用於Firefox，Safari，Opera和IE 8.

它實際上是JS解決方案。魔術去這裏：

document.getElementById('container').scrollLeft = last_img.offsetLeft;

來源

2009-10-15 08:32:34 NVI

那麼你的滾動div裏面的另一個div還剩下一個浮點數呢？還沒有嘗試過，但我會想象它的工作原理。

來源

2009-09-25 13:02:23

謝謝。好吧，scoll div本身就是一個容器div，所以也許可以通過浮動滾動div來實現同樣的效果？無論如何，我一直在玩着左邊的浮動，並且一旦到達右邊距，就無法獲得左邊滾動系列的效果。也許你可以提供一個例子？再次感謝。 – 2009-09-25 16:04:01

OK，我把它工作在IE，但不使用Firefox：

#container 
{ 
    width: 715px; 
    height: 228px; 
    border: solid 3px purple; 
    overflow:auto; 
} 
#scroll 
{ 
    height: 223px; 
    white-space: nowrap; 
    float:right; 
    margin-left: -715px; 
    border: solid 2px red; 
}

任何CSS大師那裏知道如何使兩個工作？

來源

2009-09-25 16:53:07

順便說一下，在FF中「不」工作的是，當頁面加載時，第一個圖像一路向右。在IE中，它位於滾動div的左側，當達到右邊距時圖像溢出。 – 2009-09-25 16:55:03

會是這樣的工作：

#container{overflow:hidden;} 
#scroll {float:right;min-width:715px;}

不知道它是如何在IE瀏覽器，但你可以在條件註釋加載代碼夏爾巴人的解決方案，用於

來源

2009-09-27 21:38:56 wheresrhys

使用特定的CSS IE像一切都在CSS一樣，例如：

#scroll { 
    height: 223px; 
    white-space: nowrap; 
    float:right; 
    margin-left: -715px; 
    border: solid 2px red; min-width:715px; 
} 
* html #scroll 
{ 
    min-width: auto; 
}

來源

2009-09-30 14:57:09

#scroll img {float:left}

來源

2009-10-03 04:15:54

你可以嘗試你的第一次嘗試沒有direction:rtl。
然後，在JavaScript，增加了圖像，計算新圖像的位置和滾動DIV設置scrollLeft：

scroll.scrollLeft = theNewImagePosition ;

來源

2009-10-14 13:24:45 awe

我已經做了這個項目，這是我做的。

[ [img1] [img2] [img3] ]

包裹這些圖像的外部DIV的寬度等於所有圖像的寬度（包括邊距等）。

然後使用「左」的CSS屬性到行向左移動：

left: -100px; 
overflow: hidden; /* up to you if you need this */

，它被移動到左通過，我的示例中的值是：

width_of_all_images_plus_margins - width_of_display_area

希望有所幫助，讓我知道如果我沒有足夠的解釋它...

來源

2009-10-22 13:46:23 Vamos

謝謝大家，我終於得到了答案（我必須信貸「本C」爲此）。訣竅（對我來說）：

unicode-bidi：bidi-override。

下面是HTML（與測試腳本）：

<script type="text/javascript"> 
var interval = null; 
var count = 10; 

function addImage() 
{ 
    var container = document.getElementById("imgContainer"); 
    var img = document.createElement("img"); 
    img.setAttribute("src", "flowers-100.png"); 
    container.appendChild(img); 

    if (--count == 0) clearInterval(interval); 
} 

function main() 
{ 
    interval = setInterval("addImage()", 2000); 
} 

window.onload = main; 
     </script> 
     <style type="text/css"> 
      div 
      { 
       white-space: nowrap; 
       overflow: scroll; 
       direction: rtl; 
       border: 2px solid blue; 
       width: 600px; 
       height: 110px; 
       text-align: left; 
      } 
      div span 
      { 
       direction: ltr; 
       unicode-bidi: bidi-override; 
      } 
      img 
      { 
       margin-right: 10px; 
      } 
     </style>

這裏是執行一個鏈接：

http://www.tidraso.co.uk/misc/imgContainer/

來源

2009-11-25 19:00:19

抱歉，對不起NV，我看到你有類似的答案，所以我相信你。謝謝你的幫助！ – 2009-11-25 19:06:11

非常棘手的CSS滾動問題

回答

相關問題