将水平宽度大于窗口宽度的div居中

时间:2017-01-24 01:29:32

标签: jquery css scrollbar

我有一个列表,它在页面上的分层树结构中向外扩展。我需要将页面加载到页面加载中,允许用户左右滚动。

<body>
  <div class="container">
    <div class="tree">
      <ul>
        <li>
          <ul>
            <li>
            </li>
          </ul>
        </li>
      </ul>
    </div>
  </div>
</body>

因此,假设身体的窗口大小或内部宽度为1000px。让我们说.tree是2000px。我需要加载页面,使得.tree向左为-500px,水平滚动条居中,这样用户可以左右移动以查看所有2000px的.tree。

我的尝试失败

    $innerWidth = $('body').innerWidth();
    $treeWidth = $(".tree ul:first").width();
    $(".tree").css("width", $treeWidth);
    if ($treeWidth > $innerWidth) {
        $treeDiff = ($treeWidth - $innerWidth) / 2;
        $(".container").css({"min-width" : $treeWidth, "margin-left" : -$treeDiff, "width" : $treeWidth});
    } else {
        $(".container").css({"min-width" : $treeWidth, "width" : $innerWidth});
    }

1 个答案:

答案 0 :(得分:1)

导致树蔓延的事件中包含以下内容:

var newWidthDec = parseFloat($('.tree').css('width').replace('px',''));
var newWidth = Math.ceil(newWidthFloat);

window.scrollTo((newWidth/2),0);

请注意,滚动条的左端将靠近中心页面。