Question

我尝试在加载页面时使用javascript自动居中ul列表。它可以在所有浏览器上运行，但是在Firefox上它每隔一段时间都有效，它确实是50/50并且它让我发疯，我已经设置了一个jsfiddle来向你展示这种行为。

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

小提琴：http://fiddle.jshell.net/qbv05ph9/5/

这是实际的结果，请尝试使用firefox，如果你刷新页面50％的时间它就不会工作。

http://fiddle.jshell.net/qbv05ph9/5/show/light/

甚至比较疯狂的是，如果你按住+ 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>

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

好ol'js

使用jquery position（）进行奇怪的定位

1 个答案: