1

js でさまざまな長さの div を非表示および表示する navbar を備えた、水平方向に中央に配置されたコンテナーがあります。表示された 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 を使用してパディングを挿入したいと考えています。フェイスブックはこんな感じだと思います。JavaScript の初歩的な理解で理解できる解決策を見つけることに主に集中しているため、IE のサポートについてはあまり心配したくありません。

javascriptでスクロールバーの出現/消失を最もよく補う方法を誰かが簡単に説明できますか? どうもありがとう！

スクロールバー前のサイトの画像 スクロールバー後のサイトの画像

4

2 に答える 2

1

2つの方法が思い浮かびます。まずbody { overflow:scroll }、スクロールを使用してスライドを事前に定義する方法と、スクロールバープラグインを使用して独自のスクロールを作成し、スクロールバーのcssを定義する方法{ position: absolute; right:0px; }です。注：またはもちろんrelative。bodywrapper

于 2013-01-27T23:26:09.550 に答える