使用 jquery position() 进行奇怪的定位答案

【问题标题】：weird positioning using jquery position()使用 jquery position() 进行奇怪的定位
【发布时间】：2015-02-05 14:47:54
【问题描述】：

我正在尝试在加载页面时使用 javascript 将 ul 列表自动居中。它适用于所有浏览器，但在 Firefox 上它每隔一段时间就有效，它真的是 50/50，它让我发疯，我已经设置了一个 jsfiddle 来向您展示这种行为。

我很确定我做错了什么，但我无法确定。

小提琴：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>

【问题讨论】：

图像不一定要加载到 DOM 上，所以当时不知道宽度和高度
> $(window).load(function() {
哦，你实际上已经在 window.onload 中包装好了 DOM
但你没有在小提琴？
那是 jsfiddle 为你做的，当然在实际代码上我用这两种方法都试过了，但是差别一样

标签： jquery html css twitter-bootstrap firefox

【解决方案1】：

所以，经过一番抨击后，我找到了一个对我来说效果很好的解决方案，这里是：

        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

【讨论】：