Перекрестный браузер Проблема с горизонтальной прокруткой изображения

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); 

Вам нужен элемент «добро пожаловать», чтобы получить его ширину и умножить на количество элементов приветствия. Попробуйте это внутри вашей функции $(document).ready. И ВАЖНО удалить свою ширину от css вашего .tl-events класса.