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")+''
将我自己的样式在拼到了这个地方。
scrollReveal.js导致页面加载完之后页面中点击事件添加的css参数失效了(我的Hexo next博客引发的问题)的更多相关文章
- js页面加载完后执行(document.onreadystatechange 和 document.readyState)
js页面加载完后执行javascript(document.onreadystatechange 和 document.readyState) document.onreadystatechange ...
- 关于 第三方接口支付的时候 采用post提交的方式,有两种 一种是通过 curl来进行,一种是通过js当页面加载完后跳转
这是第一种.通过javascript页面加载完后,对表单采用 post方式提交给 第三方接口----- echo <<<_END<!DOCTYPE html PUBLIC &q ...
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- javascript 实现页面加载完的操作
document.onreadystatechange = function () { if (document.readyState == "complete") {//页面加载 ...
- echarts.js导致angular-translate加载模块失败
echarts.js导致angular-translate加载模块失败,待解决
- 页面加载后resize页面布局
在我们写web的时候,有的时候页面加载完以后,布局位置有一些问题,手动改变窗口大小后则正常显示位置. 其实,我们手动改变窗口大小,是执行了resize方法. share一下兼容方法: coffee c ...
- Ionic页面加载前 ionic页面加载完成 ionic页面销毁执行的事件
ionic 中$ionicView.beforeEnter(页面刚加载前) $ionicView.afterEnter (页面加载完成) $destroy(页面销毁) 广播事件 //ionic c ...
- 页面加载完之后在执行js代码
把代码写在 window.onload = function () { //js代码 //此处js代码是页面完全加载完之后执行 } 即可. 例: <script type="text/ ...
- js&jquery页面加载完执行
js <script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert(u ...
随机推荐
- jsp网站访问次数统计的几种方法
我采用的是jsp网页,但是不管采用什么语言,原理是一样的. 第一种,单页面统计.就是说,只要点击这个页面就会统计一次. <body> <%!//在这种标记中定义的变量为全局变量 in ...
- Yii2 Composer
首先你必须得在本机配置token账号,里边涉及到一些git的用法,git的托管等等,具体方法如下: http://www.cnblogs.com/fnng/archive/2011/08/25/215 ...
- PHP基础知识小结
1.PHP中类型转换 自动转换 其它类型转换数值型 true->1 false->0 null->0 'true'->0 '-3abc'->-3 '3.123abc'-& ...
- LOJ6485 LJJ 学二项式定理 解题报告
LJJ 学二项式定理 题意 \(T\)组数据,每组给定\(n,s,a_0,a_1,a_2,a_3\),求 \[ \sum_{i=0}^n \binom{n}{i}s^ia_{i\bmod 4} \] ...
- mysql8.*忘记密码
1.关闭mysql服务 2.打开cmd窗口,找到安装目录下的bin然后复制命令 mysqld --console --skip-grant-tables --shared-memory 3.再打开一个 ...
- 点击手机返回键弹出Dialog对话框功能
在程序中,我们为了防止出现客户在使用程序填信息或者浏览页面时因误点返回键造成关闭界面的现象,需要添加弹出框功能,以确认客户是否要退出本界面,下面是功能实现的代码: 1.点击手机返回键的判断 publi ...
- (52) C# 串口通讯
一.串口通讯基本参数 1.波特率:每秒传输n个多少个二进制位. 例如 9600 b/s = 1200 B/s= 1.172KB/S 2.传输数据格式 数据格式由起始位(start bit).数据位 ...
- json path espressions的语法学习
json path espressions的语法学习 $:跟对象\元素 @:当前对象\元素 ?():应用过滤器(脚本)表达式 如: { "store": { "bo ...
- Tomcat运行错误示例
tomcat运行错误示例 当出现这种错误时,如果是自己配置的tomcat,需要找/conf/server.xml文件. 如果是使用的eclipse tomcat 插件,需要在你的工作空间 找到 如下文 ...
- Mysql DBA
1 mysqldump: Error 2020: Got packet bigger than 'max_allowed_packet' bytes when dumping table `tb_co ...