使用Stellar.js视差插件有奇怪的位置问题

Question

我正在使用jQuery库stellar.js在我正在构建的网页上创建一些视差样式滚动.到目前为止,我一直没有遇到什么问题,但是我似乎无法解决这个问题.

我有4个div作为视差的幻灯片,宽度和高度为100%,因此它填满了屏幕.然后我在内部使用一个设置宽度(940px)的"包装",以便将视差元素包含在其中,这将阻止不同显示器尺寸之间出现任何问题.

我遇到的问题是,当我给这个包装器中的任何元素一个"数据 - 恒星比率"时,除了一个之外,它会导致元素的行为不同,并且在调整窗口大小时将它们定位不同,例如查看它在不同尺寸的显示器上:

以下是我的代码示例:

HTML

<div class="slide" id="slide1" data-slide="1" data-stellar-background-ratio="0.5">
  <div class="wrapper">
    <img src="images/slide1/big_solution_button.png" data-stellar-ratio="1" data-stellar-vertical-offset="-45"alt="">
    <img src="images/slide1/tailored_text.png" data-stellar-ratio="1" data-stellar-vertical-offset="-35"alt="">
    <img src="images/slide1/button.png" data-stellar-ratio="2" data-stellar-vertical-offset="35"alt="">
    <img src="images/slide1/blur_button.png" data-stellar-ratio="0.5" data-stellar-vertical-offset="35"alt="">
  </div>    
  <a class="button" data-slide="2" title=""></a>
</div>

CSS:

有没有人对此有任何见解？

Answer 1

我已经设法为将来遇到类似问题的任何人解决了这个问题.

此问题是由启用水平滚动引起的,可以通过使Stellar函数调用如下所示来解决:

$.stellar({
   horizontalScrolling:false
   // other options...

});