2

我正在为希望将视差效果应用于所有前景元素(无背景视差)的客户开发一个网络。这个网页是 1234px 宽 x 9000px 高(所有图像、大背景图像和带有透明度的前景元素的 PNG),并且有几个前景元素。我已经使用 stellar.js 和 iscroll.js 来创建一个基于 iOS 的新滚动条来实现这个效果。视差平滑而简单,向下滚动,元素向上,反之亦然,但我遇到的问题(我已经联系了 stellar.js 开发人员但我仍在等待答案,希望他看到这个:))是我有那种有弹性的效果,在某些情况下它会将我的视口卡在某个滚动顶部。可以说,我加载了网络,一切正常,

我在 SO 上找到了一些与此问题相关的帖子,并且以某种方式帮助我的答案(从一开始我就遇到了这个问题,但我什至无法向下滚动)是这个:

iScroll 不滚动内容,只是弹回顶部

那篇文章描述了我在使用 stellar/iscroll 时遇到的同样问题,更改这些 CSS 属性帮助我最大限度地减少了反弹,但它仍然会发生。我尝试了很多#wrapper #scroller元素的高度组合,但遵循这个答案意味着我#scroller的高度比内容高很多,所以当我向下滚动时,我看到这个巨大的黑色背景,直到它反弹回内容的底部.

我将为您提供一些代码,无法共享网络,因为它还没有完成,我的客户要求我不要共享它。

这是在<head>,这里我初始化插件,我从移动视差的 stellar.js 教程中获取模板(http://markdalgleish.com/2012/10/mobile-parallax-with-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>

CSS,我将分享影响视差的特定部分,包括 stellar 和 iscroll 插件,这个片段也取自上面提到的 stellar 教程:

.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;
}
4

0 回答 0