padding-left正在工作,但padding-right不是

时间:2016-01-20 16:12:27

标签: jquery html css gsap

我有一个滚动时间轴(demo),我遇到了一个问题,padding-left正在努力隐藏时间轴左侧的时间轴分支图像,然后才滚动它,{ {1}}无法隐藏右侧的分支图像。

我尝试使用的方法是分支图像位于容器padding-right内,该容器.event_line且图像的overflow: hidden设置为100%,直到该部分滚动为止到那时padding-left动画下降到0%,显示图像。此方法适用于时间轴的左侧,但不在右侧。

为了让padding-left隐藏时间轴右侧的分支图像,我需要更改哪些内容?

2 个答案:

答案 0 :(得分:2)

只需将float:right;添加到右侧图片即可。

在CSS文件中添加此CSS

.right .timeline-item .event_line img
{
float:right;
}

答案 1 :(得分:1)

这是因为overflow:hidden切断了右侧的多余部分。由于时间轴的右侧在右侧有填充,因此填充被切除而不是内容。

尝试在margin-left-100%的时间轴右侧设置动态0,而不是动画padding-rightHere's the fiddle