Question

我正在开发一个单页滚动网站。我有几个部分，每个部分包含2列，我试图让它们从左/右进入淡入淡出效果。我正在使用CSS变换和jquery来激活效果，只有当用户滚动并到达其相应的部分时。这是一个例子： http://jsfiddle.net/Rv35g/ （调整窗口大小以使其适合容器的宽度）

HTML：

<div class="container animation-init">
    <div class="left">Column 1</div>
    <div class="right">Column 2</div>
</div>

CSS：

body, html{
    margin: 0;
    height: 100%;
}
.container{
    width: 600px;
    height: 100%;
    margin: 0 auto;
    background: green;
}
.container .left, .container .right{
    width: 50%;
    float: left;
    color: white;
    height: 100%;
}
.container .left{
    background: red;
}
.container .right{
    background: blue;
}

.container.animation-init .left, .container.animation-init .right{
    opacity: 0;    
}
.container.animation-init .left{
    -webkit-transform: translate(-80px, 0);
    -moz-transform: translate(-80px, 0);
    transform: translate(-80px, 0);     
}
.container.animation-init .right{
    -webkit-transform: translate(80px, 0);
    -moz-transform: translate(80px, 0);
    transform: translate(80px, 0);     
}

.container.animation-init.animation-ready .left, .container.animation-init.animation-ready .right{
    opacity: 1; 
    -webkit-transition: 0.5s;
    -moz-transition: 0.5s;
    transition: 1s;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    transform: translate(0, 0); 
}

JS：

$(function() {
    $('.container').addClass('animation-ready');
});

问题是，当我的列位于其初始位置时，它们会生成水平滚动条，因为它们会移出容器...您对我如何处理此问题有任何想法？我不能用overflow：hidden;因为我将削减动画的一部分。我也试过把overflow-x：hidden;到html标签，但由于效果仅在到达相应部分时激活，溢出仍然是移动设备上的问题......

编辑：overflow-x：hidden的问题是额外的空间仍然存在，所以当用手指滚动或鼠标滚轮点击箭头功能时，你可能会在其中一个空白处失去中心位置这页纸。此外，在移动设备中，它将这个溢出作为一般宽度的一部分，所以如果我有和元素从-200px到左边，它将显示容器的宽度+ aditional 200.这是一个问题，特别是当它来到位于页面底部的元素，因为它们位于其初始位置，等待您到达它们以启动动画。在我发布的示例中，溢出几乎立即消失，导致动画自动触发，但正如我在开始时告诉你的那样，我有多个部分，只有当你到达父部分时，列的动画才会开始。

使用“从侧面输入”效果避免容器的溢出滚动条

0 个答案: