Javascript iOS上Stellar.js和iScroll的视差效果，在滚动后反弹并固定在某个滚动顶部_Javascript_Ios_Mobile_Parallax_Iscroll4

Javascript iOS上Stellar.js和iScroll的视差效果，在滚动后反弹并固定在某个滚动顶部

javascript ios mobile

Javascript iOS上Stellar.js和iScroll的视差效果，在滚动后反弹并固定在某个滚动顶部,javascript,ios,mobile,parallax,iscroll4,Javascript,Ios,Mobile,Parallax,Iscroll4,我正在为一个客户开发一个web，他希望将视差效果应用于所有前景元素（没有背景视差）。该网页的宽度为1234px，高度为9000px（所有图像、大背景图像和带有透明前景元素的PNG），并有两个前景元素。我使用stellar.js和iscroll.js创建了一个基于iOS的新滚动条，实现了这个效果。视差是平滑而简单的，你向下滚动，元素向上，反之亦然，但我的问题是（我已经联系了stellar.js开发人员，但我仍在等待答案，希望他能看到：））我有一种弹性效果，在某些情况下，它会在某个滚动顶部阻塞我的

我正在为一个客户开发一个web，他希望将视差效果应用于所有前景元素（没有背景视差）。该网页的宽度为1234px，高度为9000px（所有图像、大背景图像和带有透明前景元素的PNG），并有两个前景元素。我使用stellar.js和iscroll.js创建了一个基于iOS的新滚动条，实现了这个效果。视差是平滑而简单的，你向下滚动，元素向上，反之亦然，但我的问题是（我已经联系了stellar.js开发人员，但我仍在等待答案，希望他能看到：））我有一种弹性效果，在某些情况下，它会在某个滚动顶部阻塞我的视口。比如说，我加载了网页，一切都正常，但突然我转到页面顶部，例如（它发生在任何滚动顶部），它反弹并显示“棋盘”，就像iOS一样，然后它停止在从顶部向下几个像素的位置，当我试着从那里向上滚动时，它反弹回那个位置

我在SO找到了一些有这个问题的帖子，答案在某种程度上帮助了我（从一开始我就有这个问题，但我甚至无法向下滚动）是这样的：

这篇文章描述了我在stellar/iscroll上遇到的相同问题，更改这些CSS属性帮助我最小化了反弹，但这种情况仍然存在。我对

#wrapper

#scroller

元素尝试了很多高度组合，但遵循这个答案意味着我的

#scroller

比内容要高得多，所以当我向下滚动时，我会看到这个巨大的黑色背景，直到它反弹到内容的底部

我会给你提供一些代码，不能共享网页，因为它还没有完成，我的客户要求我不要共享它

这是在

中，在这里我初始化了插件，我使用了stellar.js教程中关于移动视差（）的模板：

<meta name="viewport" content="width=device-width, initial-scale=0.62, maximum-scale=0.62, minimum-scale=0.62, user-scalable=no">

<script src="js/vendor/jquery-1.9.1.min.js"></script>
<script src="js/vendor/iscroll.js"></script>
<script src="js/vendor/jquery.stellar.js"></script>
<script type="text/javascript">

    function loaded() {
      var ua = navigator.userAgent,
        isMobileWebkit = /WebKit/.test(ua) && /Mobile/.test(ua);

      if (isMobileWebkit) {
        $('html').addClass('mobile');
      }

      $(function loaded(){
        var myScroll;

        if (isMobileWebkit) {

            setTimeout(function () { myScroll = new iScroll('wrapper', { useTransform: true, useTransition: false } ); }, 5000);

            setTimeout(function () { myScroll.refresh() }, 10000);

          $('#scroller').stellar({
            scrollProperty: 'transform',
            positionProperty: 'transform',
          });
        } else {
          $.stellar({
            horizontalScrolling: false,
          });
        }
      });

    };

    document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 100); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);

</script>

<body onload="loaded()">
<div id="wrapper">
    <div id="scroller">
        <div id="fg" data-role="content">

            <!-- all the backgrounds, I load them with the js preloader and apply them as a background-image -->
            <div id='rff-bg0'></div>
            <div id='rff-bg1'></div>
            <div id='rff-bg2'></div>
            <div id='rff-bg3'></div>
            <div id='rff-bg4'></div>

            <div id='nav-bar' data-position="fixed"> <-- This nav-bar has to be fixed because is used to navigate the web
                <!--some buttons here-->
            </div>

            <!-- lots of divs, these are the foreground parallax elements, all with the data-stellar-ratio="", this is working great -->

        </div>
    </div>
</div>
</body>

.mobile body {
  overflow: hidden;
}

.mobile #wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 9052px;
  z-index: -1;
  background-color: #000;
}

.mobile #scroller {
    height: 20000px;
    background-color: #000;
}