垂直滚动不适用于overflow-x：hidden

Question

我需要overflow-x：hidden以隐藏我的视口之外的3个div。我想为我的视口之外的3个div设置动画。每当我向下滚动时，这些div应该从左到中心显示视口。我认为问题出在CSS文件中添加了overflow-x：hidden之后的JS文件中的滚动功能。

这是我的滚动功能

var waypoint = new Waypoint({
    element: document.getElementById('faceBeforeCollection'),
    handler: function(direction) {
        console.log('Scrolled to waypoint!')
        var tl = anime.timeline({
            easing: 'easeOutExpo',
            duration: 1500
        });
        tl.add({
            targets: '#div1',
            translateX: [
                {value:0,duration:500},
                {value:-1600,duration:500}
            ]
        }).add({
            targets: '#div2',
            translateX: [
                {value:0,duration:500},
                {value:-1500,duration:500}
            ],
        }).add({
            targets: '#div3',
            translateX: [
                {value:0,duration:500},
                {value:-1400,duration:500}
            ]
        });
        this.destroy();
    }
});

css：

html,body{
    overflow-x: hidden;
    background: url(../img/white-wallpaper-18.jpg) fixed;
}

添加了overflow-x：hidden

后，我的3个div没有出现