HTML/CSS - スクロールバーを非表示にするタブが選択され、コンテンツが表示されるまで

Question

私は現在ウェブサイトを構築しており、タブがクリックされてコンテンツが表示されるまでスクロールバーを表示したくありません。現在、ページを読み込むと、すぐにスクロールバーが表示されます。理由は明らかです：タブの内容は既に読み込まれていますが、関連するタブがクリックされるまで表示されません。意味をなさない既にロードされているコンテンツにかかわらず、タブがクリックされるまでスクロールバーを削除したい。

ここには、スクロールバーのスクリーングラバーと、読み込まれていないコンテンツがあります。

Content loaded but not shown; scroll bars active

はここに関連するコードです：

HTML

<ul class="nav nav-tabs"> 
     <li><a href="#still" data-toggle="tab">Still</a></li> 
     <li><a href="#people" data-toggle="tab">People</a></li> 
     <li><a href="#product" data-toggle="tab">Product</a></li> 
     <li><a href="#portraits" data-toggle="tab">Portraits</a></li> 
     <li><a href="#street" data-toggle="tab">Street</a></li> 
     <li><a href="#iphone" data-toggle="tab">iPhone</a></li> 
</ul> 

    <div id="tab-content" class="tab-content"> 
     <div id="people" class="tab-pane fade active"> 
      <div class="row"> 
       <div class="col-sm-12"> 
        <img src="portfolio/people/thumbnails/IMG_1632_thumb.jpg"> 
        <img src="portfolio/people/thumbnails/IMG_2980_thumb.jpg">      
        <img src="portfolio/people/thumbnails/IMG_5960_thumb.jpg"> 
        <img src="portfolio/people/thumbnails/IMG_6443_thumb.jpg"> 
        <img src="portfolio/people/thumbnails/IMG_6723_thumb.jpg">      
       </div> 
      </div> 
     </div> 
    </div> 

CSS私は外部ライブラリなしでこれを行う方法がないかもしれないことを認めます

/*apply styling to the tab-content*/ 
.tab-content 
{ 
    padding-top: 20px; 

    margin-left: auto; 
    margin-right: auto; 
    text-align: center;  
} 

/*apply style to the rows in the tab-content*/ 
.tab-content .row 
{ 
    padding-top: 3px; 
    padding-bottom:3px; 
} 

しかし、私はまだちょっとでも尋ねると思った。

Answer 1

タブを切り替えるためにJavaScriptを使用している場合は、同じ機能でCSSプロパティを追加できます。

まず、本体にはデフォルトでbody{ overflow: hidden }があるとします。タブスイッチ機能では、次の行を追加することができます：スクロールバーを表示