同时使用onepage. and和scrollReveal.js

Question

我试图同时使用scrollReveal.js和onepage-scroll.js

当浏览器显示元素时，scrollReveal被设置为动画元素。漏电-卷轴有助于“伪造”一个页面的网站。

它们之间似乎存在冲突: scrollReveal在加载时运行良好，但是当我“向下滚动”到另一个“页面”时，它根本不起作用。

下面是一个片段：

​

/* 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

究其原因，这是因为on电卷并不真正滚动站点，而是更改插件容器的translate3d属性。

如果您想使用scrollReveal，可以使用fullpage.js by scrollBar:true，这将强制插件显示滚动条，从而使用浏览器提供的真正滚动功能。

在任何情况下，您都不需要使用scrollReveal，因为您总是可以使用插件(如afterLoad或afterSlideLoad )提供的回调。