CSS 过渡和溢出的 Chrome 问题：滚动或自动

Posted 2023-03-06

【中文标题】CSS 过渡和溢出的 Chrome 问题：滚动或自动

【英文标题】：Chrome issues with CSS transitions and overflow-y:scroll or auto

【发布时间】：2015-11-06 07:18:03

【问题描述】：

我首先要为我可怕的代码道歉。

我有一个“认识团队”页面，右侧是姓名列表，左侧是信息。左侧有一个包含传记的 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 就会突然消失。 div 每次使用 overflow-y:scroll 都会消失。这在 Firefox 中不会发生。

如果我将这段代码添加到fadeText() 函数中，那么Chrome 的效果会很好，但是由于滚动条的进出，过渡看起来很笨拙。

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

我已经在此处重现了该错误：https://jsfiddle.net/fqca5gsw/

任何建议将不胜感激！

【问题讨论】：

想通了，你的浮点数导致了这个问题，检查 li 元素的宽度，它们的宽度是 100%

非常感谢，删除浮动完全修复了它。想想看，我什至不记得它为什么会在那里。

好的，但如果你仍然希望那些 li 在右侧，我已经发布了一个解决方案

在我正在处理的实际页面上，删除浮动不会使其他任何内容不对齐，但还是谢谢你！ :)

【参考方案1】：

只需使用 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;