javascript - 同时使用 onepage-scroll.js 和 scrollReveal.js

Question

我正在尝试同时使用 scrollReveal.js和 onepage-scroll.js

scrollReveal 应该在浏览器显示元素时为元素设置动画。 onepage-scroll 有助于“伪造”一页网站。

似乎它们之间存在冲突:scrollReveal 初始化 加载良好 但当我“向下滚动”到另一个“页面”(onepage-scroll 的 Angular 色)时根本不起作用

这是一个片段:

/* scrollReveal implementation */
var srConf = {
    opacity: 1,
    reset: true,
    delay: "always"
};
var sr = window.sr = new scrollReveal(srConf);


/* onepage-scroll implementation */
$("#onepage-scroll").onepage_scroll({
    animationTime: 800,
    pagination: false, // I use a custom-made nav
    loop: false,
    beforeMove: function(index) {
      /* makes nav working */
        $("#desktop-navbar li.link.on").removeClass("on");
        $("#mobile-navbar li.link.on").removeClass("on");
        $("#desktop-navbar li.link").eq(index-1).addClass("on");
        $("#mobile-navbar li.link").eq(index-1).addClass("on");
    },
    afterMove: function(index) {
      // this is a try - not working
      $(document).trigger("scroll");
    }
});


$(document).on("click", ".navbar li.link", function() {
  /* programmatically "scroll" to another page */
    $("#onepage-scroll").moveTo($(this).index()+1);
});

body #desktop-navbar-container {
  position: absolute;
  top: 20px;
  width: 100%;
  text-align: center;
  z-index: 900;
  font-size: 1.5em;
}
body #desktop-navbar-container ul {
  margin: 0;
  padding: 0;
  width: inherit;
}
body #desktop-navbar-container ul li.link {
  list-style: none;
  display: inline-block;
  margin: 0 15px;
  cursor: pointer;
}
body #desktop-navbar-container ul li.link:hover,
body #desktop-navbar-container ul li.link.on {
  text-decoration: underline;
}
body #desktop-navbar-container ul li.link i.fa {
  font-size: 1.5em;
  display: inline-block;
  margin-right: 10px;
}

<link href="http://www.pskowron.info/css/onepage-scroll.css" rel="stylesheet"/>


<div class="content">
  <div id="desktop-navbar-container" class="hidden-xs hidden-sm">
    <ul id="desktop-navbar" class="navbar">
      <li class="link on">Page 1</li>
      <li class="link">Page 2</li>
    </ul>
  </div>
</div>

<div id="onepage-scroll">
  <section id="page1">
    <div style="width: 200px; height: 200px; background-color: blue;" data-sr="enter top over 0.9s"></div>
    <div style="width: 350px; height: 80px; background-color: red;" data-sr="enter left over 0.4s wait 1s"></div>
  </section>
  
  <section id="page2">
    <div style="width: 200px; height: 200px; background-color: blue;" data-sr="enter top over 0.9s"></div>
    <div style="width: 350px; height: 80px; background-color: red;" data-sr="enter bottom over 0.4s wait 1s"></div>
  </section>
</div>



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://www.pskowron.info/js/jquery.onepage-scroll.js"></script>
<script src="http://www.pskowron.info/js/scrollReveal.js"></script>

Answer 1

原因是 onepage-scroll 并没有真正滚动站点，而是更改了插件容器的 translate3d 属性。

如果需要，可以使用 scrollReveal fullpage.js通过 using the option scrollBar:true这将强制插件显示滚动条，从而使用浏览器提供的真正滚动功能工作。

在任何情况下，您都不需要使用 scrollReveal，因为您始终可以使用插件提供的回调，例如 afterLoad 或 afterSlideLoad.