我将为此致歉的代码道歉。
我有一个“与团队会面”页面,其右侧为名称列表,左侧为信息列表。有一个div,在左侧包含传记,并应用了以下CSS规则:
#bio
{
width:290px;
height:300px;
margin:15px;
font-size:18px;
color:#003399;
float:left;
transition:opacity 0.8s;
overflow-y:auto;
}
当您单击一个新名称时,此文本和其他文本将淡出。如果不可见,则将文本替换为swapText()函数,该函数将更改div的innerHTML,并且div再次淡入:
function fadeText(id)
{
var bio = document.getElementById('bio');
var name = document.getElementById('staffname');
var title = document.getElementById('stafftitle');
bio.style.opacity = 0;
name.style.opacity = 0;
title.style.opacity = 0;
setTimeout(function(){swapText(id);}, 1000);
setTimeout(function(){bio.style.opacity = 1;name.style.opacity = 1;title.style.opacity = 1;}, 1200);
}
在Chrome浏览器中,如果传记足够大,可以具有带有溢流y:auto的滚动条,则一旦文本淡出,整个div就会突然消失。div每次使用溢出-y:scroll都会消失。在Firefox中不会发生这种情况。
如果我将此代码添加到fadeText()函数中,则Chrome可以很好地播放,但是由于滚动条的弹出和弹出,过渡效果看起来很笨拙。
bio.style.overflow = "hidden";
setTimeout(function(){bio.style.overflowY = "auto";}, 2000);
我在这里重现了该错误:https://jsfiddle.net/fqca5gsw/
任何建议将不胜感激!
只需使用flex,而不是float,它们会引起li元素的宽度占用整个屏幕的问题,这增加了onClick()事件区域的发生
<div class="flex">
<div id="left">Short text</div>
<div id="right">
<li onclick="select(0);">Short text</li>
<li onclick="select(1);">Long text</li>
</div>
</div>
的CSS
.flex {
display: flex;
}
#left {
display: block;
background-color: #F5F5F5;
width: 300px;
height: 300px;
transition: opacity 0.8s;
/* float: left; */
overflow-y: auto;
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句