我正在尝试在加载页面时使用 javascript 自动将 ul 列表居中。它适用于所有浏览器，但是在 firefox 上它每隔一段时间就可以运行，它真的是 50/50，这让我发疯， 我已经设置了一个 jsfiddle 来向您展示这种行为。
我很确定我做错了什么，但我无法纠正。
fiddle :http://fiddle.jshell.net/qbv05ph9/5/
这是实际结果，用firefox试试，刷新50%就不行了。
http://fiddle.jshell.net/qbv05ph9/5/show/light/
更疯狂的是，如果您按 ctrl + shift + r 或 cmd + shift + r，它将 100% 有效。
当它出错时控制台写入:
0 "487.3999938964844 544.5 57.5"
当它正确时:
286 "773.4000244140625 544.5 57.5"
由于一些奇怪的原因，当它周围有 jsfiddle 框架集时，如果它强制你使用框架集，这里是源 html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title> - jsFiddle demo</title>
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.0.js'></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https:/css/result-light.css">
<style type='text/css'>
.list-inline {
margin-left: 0!important;
}
.carousel ul {
white-space: nowrap;
overflow-x: auto;
}
</style>
<script type='text/javascript'>//<![CDATA[
$(window).load(function(){
$(document).ready(function() {
console.log(Math.round($('#pic_236810').position().left - ($('#pics').width()/2) + $('#pic_236810').width()/2 ), $('#pic_236810').position().left +" "+ $('#pics').width()/2 + " "+ $('#pic_236810').width()/2 );
$('#pics').animate({ scrollLeft: Math.round($('#pic_236810').position().left - ($('#pics').width()/2) + $('#pic_236810').width()/2 ) }, 0);
})
});//]]>
</script>
</head>
<body>
<div class="carousel clear">
<ul class="list-inline" id="pics">
<li id="pic_236795">
<div class="thumbdiv media pics_non_ ">
<a href="236795"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236809">
<div class="thumbdiv media pics_non_ ">
<a href="236809"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236808">
<div class="thumbdiv media pics_non_ ">
<a href="236808"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236807">
<div class="thumbdiv media pics_non_ ">
<a href="236807"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236806">
<div class="thumbdiv media pics_non_ ">
<a href="236806"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236803">
<div class="thumbdiv media pics_non_ ">
<a href="236803"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236810">
<div class="thumbdiv media pics_non_ ">
<a href="236810"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236805">
<div class="thumbdiv media pics_ ">
<a href="236805"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
selected_thumb thumb">
</a>
</div>
</li>
<li id="pic_236804">
<div class="thumbdiv media pics_ ">
<a href="236804"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236802">
<div class="thumbdiv media pics_ ">
<a href="236802"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236801">
<div class="thumbdiv media pics_ ">
<a href="236801"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236800">
<div class="thumbdiv media pics_ ">
<a href="236800"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236799">
<div class="thumbdiv media pics_ ">
<a href="236799"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236798">
<div class="thumbdiv media pics_ ">
<a href="236798"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236797">
<div class="thumbdiv media pics_ ">
<a href="236797"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
<li id="pic_236796">
<div class="thumbdiv media pics_ ">
<a href="236796"><img alt="" src="http://i.imgur.com/Fp2Vjfi.jpg?1" class="img-responsive
thumb">
</a>
</div>
</li>
</ul>
</div>
</body>
</html>
最佳答案
所以，经过一番抨击后，我找到了一个对我来说工作得很好的解决方案，这里是:
var p = document.getElementById("pic_"+_opts.center_pic);
var left = p.offsetLeft ;
var offset = (($('#pics').width()/2) - $('#pic_'+_opts.center_pic).width()/2 );
$('#pics').animate({ scrollLeft: Math.round(left - offset) }, 0);
很好的 js
关于jquery - 使用 jquery position() 进行奇怪的定位，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28346932/