使用 Scrollmagic 向右而不是向左水平滚动会留下很大的空白

问题描述

我正在使用 Scrollmagic 进行水平滚动。当事情向左滚动时，一切正常。然而，当我让它向右滚动时，在最后一张图片之后是一个很大的空白区域。

我在我的标题中使用这个：

<Meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0">

这是我的html，所有图片的宽度都一样：

<!-- horizonal scroll left ------->
<div class="wraper">
    <div class="container" id='container2'>


        <img src="img/demobegins.jpg" />
        <div class="caption more-space-right desktop">
            caption 3

        </div>
        

        <img src="img/demo-mayfair-detre-1950.jpg" />
        <div class="caption more-space-right desktop">
            caption 2
        </div>
        

        <img src="img/demo-exposition-buildings-ca1949-upitt.jpg" />
        <div class="caption more-space-right desktop">
            caption 3
        </div>
        

    </div>
</div>
<!-- end horizonal scroll left------->

CSS：

.wraper{
  overflow-x: hidden;
}

.container{
  width: 4000px;
  height: 100vh;
}

#container2 {

}

.container p{
  position: absolute;
  top: 50%;
  left: 3%;
  transform: translateY(-50%);
}


#container2 img,#container2 .caption {
    float: right;
}

.container .caption {
  width: 200px;
  margin-top: 40px;
  margin-left: 20px;
  margin-right: 20px;
}

.container img {
  max-width: 80%;
}

jquery:

var HorzcontrollerLeft = new ScrollMagic.Controller();

var tl2 = new TimelineMax();

var elementWidth2 = document.getElementById('container2').offsetWidth;

var width2 = window.innerWidth - elementWidth2;

var duration2 = elementWidth / window.innerHeight * 100;

var official2 = duration2 + '%';

tl2
.to('#container2',5,{x: -width,ease: Power0.easeNone});

var scene2 = new ScrollMagic.Scene({
        triggerElement: '#container2',triggerHook: 0,duration: official2
})
.setPin('#container2')
.setTween(tl2)
.addTo(HorzcontrollerLeft);
}

谁能看到我做错了什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

horizontal-scrolling scrollmagic