我在处理 this 时遇到的奇怪问题在右下角是一个历史部分,其中有一个向右或向左移动的可滚动部分。在加载时,它会选择一个随机数并移动到它。
问题是在加载时(没有移动)它加载到错误的位置,并且在使用 api 移动时它移动到错误的偏移量(右图像只是没有正确定位)。此问题仅发生在 Webkit 浏览器(Safari 和 Chromium)
任何帮助将不胜感激,因为我似乎无法深入了解这个 IE 和 FF 的行为很奇怪! :(
JavaScript:
$(document).ready(function(){
$('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
var api_timeline = $(".timeline-container").data("scrollable");
//console.info(api_timeline.getSize());
var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
//console.info(timeline_random_index);
api_timeline.move( timeline_random_index, 1000 );
});
HTML
<div class="timeline-container">
<div class="timeline-items">
<div class="timeline-item">
<img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb01.png" />
<p><span class="timeline-item-date">1996</span> Russian Flag carrier Aeroflot created</p>
</div>
<div class="timeline-item">
<img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb02.png" />
<p><span class="timeline-item-date">1997</span> Universal Studios created</p>
</div>
<div class="timeline-item">
<img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb03.png" />
<p><span class="timeline-item-date">1998</span> Vodafone brand refresh</p>
</div>
<div class="timeline-item">
<img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb04.png" />
<p><span class="timeline-item-date">1998</span> Wembley Stadium identity created</p>
</div>
<div class="timeline-item">
<img src="http://identica.local/wp-content/uploads/2010/10/timeline_thumb05.png" />
<p><span class="timeline-item-date">2000</span> Jonnie Walker brand created</p>
</div>
</div>
</div>
CSS
.timeline-container {overflow:hidden; width: 245px;position:relative; min-height: 170px;height: 170px !important;}
.timeline-container .timeline-items { width:20000em; position:absolute;}
.timeline-container .timeline-item {float:left;text-align:center;position: relative;}
.timeline-container .timeline-items p { font-weight: normal; font-size: 13px; margin-bottom:0;}
.timeline-container .timeline-items span { font-weight: bold;}
更新
真奇怪,我在jsFiddle上设置了这个并且它在所有浏览器中都能正常运行。使用完全相同的代码。不是更困惑。一定是页面上的“其他”因素在影响它。
更新 2
我刚刚以某种方式“修复”了它,但这是一个肮脏的小 hack - 不理想但有效:
$(document).ready(function(){
$('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
var api_timeline = $(".timeline-container").data("scrollable");
var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
var timeline_random_index_pixles = timeline_random_index * 245 * -1;
$(".timeline-items").css("left", timeline_random_index_pixles+"px")
});
最佳答案
通过在加载时使用自定义定位而不是可滚动函数修复。
$(document).ready(function(){
$('.timeline-container').scrollable({circular: true, next: ".timeline-next", prev: ".timeline-prev"});
var api_timeline = $(".timeline-container").data("scrollable");
var timeline_random_index = Math.floor( Math.random() * ( api_timeline.getSize()+1) )+1;
var timeline_random_index_pixles = timeline_random_index * 245 * -1;
$(".timeline-items").css("left", timeline_random_index_pixles+"px")
});
关于javascript - JQuery Scrollable Missing position onload 和 on api seek 在 webkit 浏览器中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3937625/