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

Question

这是我的小提琴。

我在滚动时遇到问题。我在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;
}

这是我的网页

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