滚动条淡入推文本问题

时间:2017-12-15 09:57:10

标签: html css

问题

我已经在我的应用程序内部的List元素上创建了效果,以便当我将鼠标悬停在List元素上时会出现滚动条。这很棒,并且按预期工作。

正在发生的问题是当滚动条出现时它似乎推动列表中的文本以适应滚动条,我想知道是否有一种方法可以设置滚动条覆盖元素?< / p>

请参阅以下显示代表问题的GIF的链接:

https://media.giphy.com/media/3oxHQrFD8iJiH39b5m/giphy.gif

代码

ul
{
    overflow: hidden;
    width: 100%;
}

ul:hover {
    overflow-y:scroll;
    -webkit-transition: all .5s;
}

2 个答案:

答案 0 :(得分:0)

可能是因为您使用%宽度。当滚动条“100%”变小时,它会调整大小 您可以设置ul width static(与其父级相同)。这样,当滚动条出现时,您的内容将不会被推送。

答案 1 :(得分:0)

css无法读取滚动条大小,因此无法将填充设置为占位符。使用js你可以通过比较带有和没有滚动条的宽度

来做到这一点