Question

我将为我可怕的代码道歉。

我有一个＆＃34;会见团队＆＃34;页面右侧是名称列表，左侧是信息。在左边有一个包含传记的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中，如果传记足够大，可以使用overflow-y：auto滚动条，那么一旦文本淡入，整个div就会突然消失。每次使用overflow-y滚动时，div都会消失。这在Firefox中不会发生。

如果我将此代码添加到fadeText（）函数中，那么Chrome会很好用，但由于滚动条弹出和滚出，转换结果看起来很笨拙。

bio.style.overflow = "hidden";
setTimeout(function(){bio.style.overflowY = "auto";}, 2000);

我在这里复制了这个错误：https://jsfiddle.net/fqca5gsw/

非常感谢任何建议！

Answer 1

只是使用flex，而不是浮动它们导致问题，li元素的宽度占据了整个屏幕，这增加了onClick（）事件区域的发生

merge into QuotationInfo qf
using
(
select cf.SupplierId,cf.QuotationId  from 
ContractInfo cf 
inner join
Quotation Q 
on
cf.ContractId=Q.contractid
and 
cf.QuotationId  =q.id                   
)t 
on
(t.QuotationId=qf.QuotationId )
when matched then
update set qf.SupplierId=t.SupplierId

CSS

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

Chrome转换和溢出问题的Chrome问题：滚动或自动

1 个答案: