HTML/CSS - 隐藏滚动条，直到选项卡被选中并显示内容

我目前正在建立一个网站，我不想显示滚动条，直到单击一个选项卡并显示内容。目前，当我加载页面时，会立即出现滚动条。原因很明显：标签中的内容已经加载，但直到点击相关标签时才显示。说得通。无论已加载的内容如何，我都希望删除该滚动条，直到点击该标签。HTML/CSS - 隐藏滚动条，直到选项卡被选中并显示内容

下面是滚动条和未加载内容的抓屏。

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; 
}

我承认，可能没有办法做到这一点没有外部库，但我想我仍然会问，以防万一。

来源

2017-07-18 FrakkinShip

尝试在显示内容之前向“.tab-content”添加overflow：点击该标签时添加“overflow：visible” – blecaf

您知道吗关于溢出属性？也许[这篇文章]（https://www.w3schools.com/cssref/pr_pos_overflow.asp）将帮助 – flosommerfeld

@flosommerfeld溢出知识帮助非常大！非常感谢！ – FrakkinShip

如果您使用JavaScript切换选项卡，您可以在同一功能上添加CSS属性。

首先你说身体有默认的body{ overflow: hidden }。在标签页切换功能中，您可以添加以下行：document.body.style.overflow = "auto";显示滚动条

来源

2017-07-18 20:52:50

HTML/CSS - 隐藏滚动条，直到选项卡被选中并显示内容

回答

相关问题