Question

我有一个水平居中的容器，其中有一个导航栏，用js隐藏和显示不同长度的div。有时，如果显示的div中的内容太长，则显示div也会显示滚动条并导致页面在某些浏览器中“跳转”到左侧。 CSS只是Bootstrap的基本脚手架。

以下是该网站正在发生的事情的要点。但你可以在这里看到生产中的问题：http://dylanpatrickclark.com

<body>
  <script type="text/javascript">
  $(document).ready(function(){ 
    function setNavState(currentHash) {
      $('nav ul li').removeClass('active');
      var selector = 'nav ul li a[href="' + currentHash + '"]';
      $(selector).parent().addClass('active');
    };
    function hash() {
      var hash = window.location.hash;
      if (hash != ''){
        $('.tabs div').hide();
        $(hash).show();
      }
      else {
        $('.tabs div').hide();
        $('.tabs div#tab1').show();
        hash = 'tab1'
      }
      setNavState(hash);
    };
    hash();
    $(window).bind('hashchange', function() {
      hash()
    });
  });
</script>


<h1>Hello, world!</h1>
<div class="container">
  <div class="row">
    <nav>
      <ul>
        <li> <a href="#tab1">Tab1</a> </li>
        <li> <a href="#tab2">Tab2</a> </li>
      </ul>
    </nav>
  </div>
</div>
<div class="row">
  <div class="tabs">
    <div class="tab-pane" id="tab1">
      <p>Short</p>
    </div>
    <div class="tab-pane" id="tab2">
      <p>Long</p>
    </div>
  </div>
</div>
</body>

我在这里看到了很多旧问题的答案，其中很多都建议强制滚动条显示，但我宁愿使用js插入填充以补偿滚动条。我认为facebook会做这样的事情。我并不是真的想担心IE的支持，因为我主要关注的是找到一个我能理解的基于javascript的基本理解的解决方案。

有人能解释一下如何用javascript最好地补偿滚动条的出现/消失吗？非常感谢你！

Image of site before scrollbar Image of site after scrollbar

Answer 1

我想到了两种方法，首先您可以定义body { overflow:scroll }以预先使用滚动进行滑动，或者您可以使用scrollbar plugin创建自己的滚动并定义滚动条的css { position: absolute; right:0px; }。注意：relative到body或wrapper当然。

Answer 2

当我遇到这个问题时，

body {overflow-y:scroll}对我来说非常合适

插入填充以补偿“滚动条跳转”

2 个答案: