文章目录

个人博客: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")+''

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

scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了(我的Hexo next博客引发的问题)的更多相关文章

  1. js页面加载完后执行(document.onreadystatechange 和 document.readyState)

    js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...

  2. 关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转

    这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...

  3. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  4. javascript 实现页面加载完的操作

    document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...

  5. echarts.js导致angular-translate加载模块失败

    echarts.js导致angular-translate加载模块失败,待解决

  6. 页面加载后resize页面布局

    在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...

  7. Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件

    ionic 中$ionicView.beforeEnter(页面刚加载前)  $ionicView.afterEnter  (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...

  8. 页面加载完之后在执行js代码

    把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...

  9. js&jquery页面加载完执行

    js <script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(u ...

随机推荐

  1. 阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量

    2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支撑.在 ...

  2. ac自动机暴力跳fail匹配——hdu5880

    很简单的题,ac自动机里再维护一个len表示每个状态的串长,用s去query时每到一个结点都要暴力跳fail,因为有可能这个结点不是,但是其fail是危险结点,找到一个就直接break 再用个差分数组 ...

  3. noip1998 提高组t3 挖地雷

    题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...

  4. [NOIP模拟15]题解

    A.建设城市(city) 这容斥题多难啊你们是怎么考场切掉的啊 首先可以想一下,如果没有k的限制,这题怎么做? 相信你们肯定能看出来是挡板法裸题:m个物品分给n个人,每个人至少一个. 就是$C_{m- ...

  5. js读取json数据

    { "code": 0, "msg": null, "data": { "pageNum": 1, "page ...

  6. git入门基本命令

    第一个命令 git init (repo_dir) 初始化git版本库,如果省略repo_dir的话,那么就把当前目录作为git库进行初始化. 第二个命令 git status 查看版本库状态,随时可 ...

  7. 使用SpringMVC<mvc:view-controller/>标签时踩的一个坑

    <mvc:view-controller>标签 如果我们有些请求只是想跳转页面,不需要来后台处理什么逻辑,我们无法在Action中写一个空方法来跳转,直接在中配置一个如下的视图跳转控制器即 ...

  8. D-Ubuntu中修改MySQL的默认数据集(client和server)

    Ubuntu16.04,MySQL5.7 1, sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 使用vim编辑MySQL的配置文件,不同版本的MySQL配置文件 ...

  9. java oop第10章_JDBC03(MVC分层模式)

    引言:在进行程序开发的时候,为了更加利于程序的管理我们引入了新的开发模式MVC分层模式,即按功能将程序代码分别分为M(Model模型).V(View视图).C(Controller控制器)三个组成部分 ...

  10. php7 安装时需求的依赖包

    php70 php70-bcmath php70-cli php70-common php70-devel php70-fpm php70-gd php70-json php70-mbstring p ...