跨瀏覽器水平圖像滾動問題

Question

這是我的Fiddle。

我在滾動中遇到問題。 我在Chrome中打開頁面時，滾動效果非常好，當內容完成時它會停止。但在firefox中，即使內容已完成，它也會繼續滾動，因爲我已將固定寬度定義爲div。

我的問題是我不知道會有多少圖像，因爲它會來自數據庫，所以我不能使用固定的寬度進行滾動。

我怎樣才能得到這個固定的。

我使用鼠標拖動進行滾動。

這裏是我的CSS代碼

#timeline { 
    height: 375px; 
    margin-top: 10px; 
    padding: 20px; 
    overflow: auto; 
} 

.tl-events { 
    width: 11800px; 
    list-style: none; 
    padding: 0; 
    margin: 0; 
} 

.tl-events li { 
    float: left; 
    width: 300px; 
    margin-right: 10px; 
} 

.tl-events ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 

這是我的HTML

<div id="timeline"> 
     <ul class="tl-events"> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 
<li class="welcome"> 
<h2>Welcome to the interactive timeline of Google history!</h2> 
<p>Travel through time by dragging the timeline or the slider below. Click on any event to see more information.</p> 
</li> 

</ul> 
    </div> 

這裏是我的JS

$(document).ready(function() {   
     $('#timeline').mousedown(function (event) { 
      $(this) 
       .data('down', true) 
       .data('x', event.clientX) 
       .data('scrollLeft', this.scrollLeft); 

      return false; 
     }).mouseup(function (event) { 
      $(this).data('down', false); 
     }).mousemove(function (event) { 
      if ($(this).data('down') == true) { 
       this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX; 
      } 
     }).mousewheel(function (event, delta) { 
      this.scrollLeft -= (delta * 30); 
     }).css({ 
      'overflow' : 'hidden', 
      'cursor' : '-moz-grab' 
     }); 
    }); 

    $(window).mouseout(function (event) { 
     if ($('#timeline').data('down')) { 
      try { 
       if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') { 
        $('#timeline').data('down', false); 
       }     
      } catch (e) {} 
     } 
    }); 

我到底錯在這裏做什麼？

Answer 1

添加display: inline-flex; width:auto;到.tl-events然後檢查。

Answer 2

看來你必須得到包含li選項的元素的寬度來設置.tl事件的寬度。您不得使用像.tl-events { width: 11800px;這樣的靜態寬度。你怎麼能解決。

var welcome = $('.welcome'), cont=0; 

$(welcome).each(function(index) { 
    cont++; 
}); 

var welcome_w = $('.welcome').width * cont; 
$('#timeline').css('width', welcome_w); 

您需要元素'welcome'來獲取它的寬度並將其乘以歡迎元素的數量。在$(document).ready函數中試試這個。並且重要從您的.tl-events類的css中刪除您的寬度。