如何解决如何滚动溢出的内容?
我有一个固定宽度的容器,里面有元素列表:
* {
box-sizing: border-box;
}
.element {
width: 200px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.element:hover {
background: grey;
}
.name {
max-width: 80%;
white-space: nowrap;
overflow-x: hidden;
transition: transform 2s;
}
.name:hover {
overflow-x: visible;
transform: translateX(-50%);
/* Value of translate is subjected to change */
}
<div class="container">
<div class="element">
<div class="name">Short line</div>
<div class="number">10</div>
</div>
<div class="element">
<div class="name">Short line 2</div>
<div class="number">20</div>
</div>
<div class="element">
<div class="name">Very very very very very very long line</div>
<div class="number">30</div>
</div>
<div class="element">
<div class="name">Very very very very very very very very very very very very long line</div>
<div class="number">40</div>
</div>
</div>
目前,这种方法存在一些问题:
- 这看起来很丑,因为
overflow: visible
与number
容器重叠。 - 它向左移动并显示剪裁后的文本,但不会隐藏不需要的文本。就是开箱即用。
- 它影响所有元素,但我只需要它影响用
overflow: hidden
剪切的行。 - 定时是不好的,因为很长的行滚动太快,并且滚动的时间不是很长,但是滚动得太慢。我想要的是恒定的滚动速度,因此对于不同的行,它将具有不同的动画时间。但是我不确定纯CSS是否可行。
- 将鼠标悬停在下一个元素上时,有时不会触发滚动。我希望动画立即取消。
纯CSS动画有可能实现这些功能吗?
解决方法
在名称类中设置此代码,以通过滚动显示溢出的内容
overflow:scroll;
,
这只是一个捷径,直到更复杂的替代方法可以工作为止。
* {
box-sizing: border-box;
}
.container{
background-color: white;
}
.element {
width: 200px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
transition: all 0.3s ease;
}
.element:hover {
background: grey;
}
.element:nth-child(3):hover .name{
overflow-x: visible;
transform: translateX(-35%);
/* Value of translate is subjected to change */
}
.element:nth-child(4):hover .name{
overflow-x: visible;
transform: translateX(-130%);
/* Value of translate is subjected to change */
}
.element:hover .number{
background-color: grey;
}
.name{
max-width:100%;
white-space:nowrap;
transition: transform 2s;
}
.number{
position:absolute;
margin-left:195px;
transition: 0.4s;
z-index:10000;
background-color: white;
}
.block{
position: absolute;
z-index: 1000;
background-color: white;
height: 1em;
width: 1em;
margin-left:-15px;
}
.side_block{
top: 0;
left:0;
margin-left: 219px;
position:absolute;
background-color: white;
overflow:hidden;
width: 50vw;
height:100px;
z-index: 10000;
}
<div class="container">
<div class="element">
<div class="block"></div>
<div class="name">Short line</div>
<div class="number">10</div>
</div>
<div class="element">
<div class="block"></div>
<div class="name">Short line 2</div>
<div class="number">20</div>
</div>
<div class="element">
<div class="block"></div>
<div class="name">Very very very very very very long line</div>
<div class="number">30</div>
</div>
<div class="element">
<div class="block"></div>
<div class="name">Very very very very very very very very very very very very long line</div>
<div class="number">40</div>
</div>
<div class="side_block"></div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。