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 ...
随机推荐
- 阿里云文件存储(NAS)助力业务系统承载双十一尖峰流量
2018天猫双11全球狂欢节,全天成交额再次刷新纪录达到2135亿元,其中总成交额在开场后仅仅用了2分05秒即突破100亿元,峰值的交易量达到惊人的高度,背后离不开阿里云大数据计算和存储能力的支撑.在 ...
- ac自动机暴力跳fail匹配——hdu5880
很简单的题,ac自动机里再维护一个len表示每个状态的串长,用s去query时每到一个结点都要暴力跳fail,因为有可能这个结点不是,但是其fail是危险结点,找到一个就直接break 再用个差分数组 ...
- noip1998 提高组t3 挖地雷
题目背景 NOIp1996提高组第三题 题目描述 在一个地图上有N个地窖(N<=20),每个地窖中埋有一定数量的地雷.同时,给出地窖之间的连接路径.当地窖及其连接的数据给出之后,某人可以从任一处 ...
- [NOIP模拟15]题解
A.建设城市(city) 这容斥题多难啊你们是怎么考场切掉的啊 首先可以想一下,如果没有k的限制,这题怎么做? 相信你们肯定能看出来是挡板法裸题:m个物品分给n个人,每个人至少一个. 就是$C_{m- ...
- js读取json数据
{ "code": 0, "msg": null, "data": { "pageNum": 1, "page ...
- git入门基本命令
第一个命令 git init (repo_dir) 初始化git版本库,如果省略repo_dir的话,那么就把当前目录作为git库进行初始化. 第二个命令 git status 查看版本库状态,随时可 ...
- 使用SpringMVC<mvc:view-controller/>标签时踩的一个坑
<mvc:view-controller>标签 如果我们有些请求只是想跳转页面,不需要来后台处理什么逻辑,我们无法在Action中写一个空方法来跳转,直接在中配置一个如下的视图跳转控制器即 ...
- D-Ubuntu中修改MySQL的默认数据集(client和server)
Ubuntu16.04,MySQL5.7 1, sudo vim /etc/mysql/mysql.conf.d/mysqld.cnf 使用vim编辑MySQL的配置文件,不同版本的MySQL配置文件 ...
- java oop第10章_JDBC03(MVC分层模式)
引言:在进行程序开发的时候,为了更加利于程序的管理我们引入了新的开发模式MVC分层模式,即按功能将程序代码分别分为M(Model模型).V(View视图).C(Controller控制器)三个组成部分 ...
- php7 安装时需求的依赖包
php70 php70-bcmath php70-cli php70-common php70-devel php70-fpm php70-gd php70-json php70-mbstring p ...