跨浏览器水平图像滚动问题

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中删除您的宽度。