CSS3转换不会正常渲染溢出滚动

我在为我的网站构建的选项卡插件中使用不透明度转换。但是，这影响了我对我的div的overflow: auto。只有集合中的最后一个滚动。这小提琴解释了什么我谈论：CSS3转换不会正常渲染溢出滚动

这里是我的HTML：

<div class="content"> 
    <div class="tab-content active" id="breeding"> 
     <h1>Breeding</h1> 
     <p>Want to try your chances at getting a unique combination of two of the rabbits you own? Welcome to breeding! This takes place 
      in your habitat and heavily relies on the relationship of these two rabbits. Rabbits are genderless meaning you can breed 
      any two rabbits together, given you have the correct carrot item for it.</p> 
    </div> 
    <div class="tab-content" id="adventure"> 
     <h1>Adventure</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
      Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
      gravida tellus lobortis aliqu.</p> 
    </div> 
    <div class="tab-content" id="habitats"> 
     <h1>Habitats</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
      Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
      gravida tellus lobortis aliqu.</p> 
    </div> 
    <div class="tab-content" id="gardening"> 
     <h1>Gardening</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
      Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
      gravida tellus lobortis aliqu.</p> 
    </div> 
    <div class="tab-content" id="fishing"> 
     <h1>Fishing</h1> 
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus dui tortor, eu fermentum libero condimentum hendrerit. 
      Duis efficitur faucibus varius. Suspendisse at turpis sit amet enim tincidunt tincidunt ac non urna. Praesent eget neque 
      gravida tellus lobortis aliqu.</p> 
    </div> 
</div> 

<a href="#" class="change" data-content="breeding">Change content to breeding</a> | 
<a href="#" class="change" data-content="adventure">Change content to adventure</a> | 
<a href="#" class="change" data-content="habitats">Change content to habitats</a> | 
<a href="#" class="change" data-content="gardening">Change content to gardening</a> | 
<a href="#" class="change" data-content="fishing">Change content to fishing</a>

我的CSS：

.content { 
    width: 100%; 
    border: 1px solid #d2d2d2; 
    position: relative; 
    height: 150px; 
} 

    .content .tab-content { 
     padding: 25px; 
     box-sizing: border-box; 
     opacity: 0; 
     transition: opacity .25s ease-in-out; 
     position: absolute; 
     left: 0; 
     height: 150px; 
     overflow-y: scroll; 
    } 

     .content .active { 
      opacity: 1; 
     }

而且我的jQuery：

$('.change').on('click', function(e) { 
    e.preventDefault(); 

    $('.tab-content').removeClass('active'); 

    $('#' + $(this).data('content')).addClass('active'); 
});

T任何帮助。

来源

2015-09-06 user3130415

visibility是你的朋友:)

的事情是，你的最后的内容是一切的顶部，因此接收所有的鼠标事件，显然阻止它对于下的每个其他内容。 opacity: 0并不意味着内容不再适合鼠标事件，它实际上仍然存在。为了使

只需在.content .tab-content规则和visibility: inherit;在.content .active规则下一个加visibility: hidden;作为一个更规则opacity和你做。

这里是你的更新fiddle。

CSS：

.content { 
    width: 100%; 
    border: 1px solid #d2d2d2; 
    position: relative; 
    height: 150px; 
} 
.content .tab-content { 
    padding: 25px; 
    box-sizing: border-box; 
    opacity: 0; 
    visibility: hidden; 
    transition: opacity .25s ease-in-out; 
    position: absolute; 
    left: 0; 
    height: 150px; 
    overflow-y: scroll; 
} 
.content .active { 
    opacity: 1; 
    visibility: inherit; 
}

来源

2015-09-08 08:53:26

CSS3转换不会正常渲染溢出滚动

回答

相关问题