1

我有一个水平居中的容器，带有一个导航栏，可以用 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补偿滚动条的出现/消失吗？太感谢了！

滚动条前的站点图像 滚动条后的网站图片

4

2 回答 2

1

body {overflow-y:scroll}当我遇到这个问题时，对我来说非常有用

于 2015-01-14T13:28:06.363 回答
1

我想到了两种方法，首先您可以使用滚动定义防止滑动，其次您可以使用滚动条插件body { overflow:scroll }创建自己的滚动并定义滚动条的 css 。注：to or course。{ position: absolute; right:0px; }relativebodywrapper

于 2013-01-27T23:26:09.550 回答