scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了（我的Hexo next博客引发的问题）

文章目录

• 时间
• 背景
• 问题解决

个人博客：https://mmmmmm.me

源码：https://github.com/dataiyangu/dataiyangu.github.io

时间

2019.3.3

背景

之前给自己加了护眼色的小功能，本来应该是这样的：

今天发现，点击护眼色后期初是没问题的，但是只要一滚动就会变成下面这样。

问题解决

发现不滚动还是正确的，一滚动就暴露错误了，想起来前段时间加了scrollReveal.js

所以应该是scrollReveal的问题。

跟了跟源码，发现

 update: function (el) {
      var that = this;
      var css   = this.genCSS(el);
      var style = this.styleBank[el.getAttribute("data-scroll-reveal-id")];
      if (style != null) style += ";"; else style = "";
      if (!el.getAttribute('data-scroll-reveal-initialized')) {
        el.setAttribute('style', style + css.initial);
        el.setAttribute('data-scroll-reveal-initialized', true);
      }
      if (!this.isElementInViewport(el, this.options.viewportFactor)) {
        if (this.options.reset) {
          el.setAttribute('style', style + css.initial + css.reset);
        }
        return;
      }
      if (el.getAttribute('data-scroll-reveal-complete')) return;
      if (this.isElementInViewport(el, this.options.viewportFactor)) {
        el.setAttribute('style', style + css.target + css.transition+'background:'+$("#canvas").css("background")+'');
        //  Without reset enabled, we can safely remove the style tag
        //  to prevent CSS specificy wars with authored CSS.
        if (!this.options.reset) {
          setTimeout(function () {
            if (style != "") {
              el.setAttribute('style', style);
            } else {
              el.removeAttribute('style');
            }
            el.setAttribute('data-scroll-reveal-complete',true);
            that.options.complete(el);
          }, css.totalDuration);
        }
        return;
      }
    },

这里将我们将要发生动画的div的style属性进行了重写，从上面看的是在原来的style上加入了";"，然后往后面加入scrollReveal自己的style，可是仔细想想，我的护眼模式点击改变背景色，并没有经过刷新，所以他原来的style并不是后来点击之后的style，所以还是没有加上。

最终解决方案是在

if (this.isElementInViewport(el, this.options.viewportFactor)) {
        el.setAttribute('style', style + css.target + css.transition+'background:'+$("#canvas").css("background")+'');

'background:'+$("#canvas").css("background")+''

将我自己的样式在拼到了这个地方。