水平滾動元素，未指定寬度

我正在嘗試水平滾動元素，並將其父級溢出設置爲隱藏。水平滾動元素，未指定寬度

這裏是我到目前爲止有：

HTML：

<div class="parent"> 
    <div class="scroll">This element's text scrolls horizontally.</div> 
</div>

CSS：

.parent { 
    overflow: hidden; 
    height: 36px; 
} 
.scroll { 
    width: 1500px; 
}

JS：

$(function(){ 
    var $parent = $('.parent'), 
     $scroll = $('.scroll'), 
     width = $scroll.width(), 
     scroll = function(){ 
      $scroll.animate({ 
       'margin-left': -width 
      }, 12000, function() { 
       $scroll.css('margin-left', $parent.width()); 
       scroll(); 
      }); 
     }; 

    scroll(); 
});

工作演示：http://jsfiddle.net/hTnNk/

上述工程完美無缺，但具有一個固定的寬度的內部元件（.scroll）。

有沒有什麼辦法可以在不明確設置內部元素的寬度的情況下完成此操作？

來源

2012-10-30 MegaHit

某處您需要一個「固定」寬度（即使其佔視口的百分比）。否則，內容將無限擴展（永遠不會觸發滾動條的需要）。 –

@KevinBoucher - 由於文本來自CMS，因此無法提前確定其寬度。 – MegaHit

啊。我想我誤解了這個問題。看起來像@GionaF有你所需要的。 –

如果添加：

.scroll { 
    white-space:nowrap; 
}

，並取代width = $scroll.width()：

width = $scroll.get(0).scrollWidth

它會沒有明確設定寬度做工精細。 Demo

來源

2012-10-30 18:39:33 Giona

元素不會一直向左滾動，因爲它的寬度在父元素的右邊緣結束。 – MegaHit

哦，我錯過了@MegaHit。檢查我的編輯，它現在正在工作;） – Giona

這只是在您的演示中發生的任意寬度。看看這個：http://jsfiddle.net/pvfcM/2/ – MegaHit

水平滾動元素，未指定寬度

回答

相關問題