浏览器情况
出现在Edge以及IE9+上(当时网页只兼容到ie9,所以9-的没看)
我平时用的Chrome上没问题,QQ浏览器下的IE兼容模式也没问题。
详情描述
背景图片是设置在body下的一个大容器里的(几乎占据整个body)。
然后这个背景图片设置了fixed属性(验证了是主要原因),取消就没事。
当网页滚动的时候,图片并没有fixed不动,而是一截一截的变换位置。
导致看起来的视觉效果就图片一直在上下抖动。
肤浅地分析原因
根据这个效果的视觉特点观察得到,
图片并没有fixed不动,而是随着网页向上滚,
然后短时间内,又重新渲染定位到fixed的位置,导致了这种视觉效果。
即——滚动的执行频率和浏览器的渲染频率不搭配。
‘/`' 敲黑板
经过在网上搜索,得到以下解决的方法,并针对实际情况进行了少许改动。
- if (!!window.ActiveXObject ||
- "ActiveXObject" in window ||
- navigator.userAgent.indexOf("Edge") > -1) {
- document.body.addEventListener &&
+ document.body.addEventListener("mousewheel", function() {
- if (document.all) {
- window.event.returnValue = false;
- }else {
- event.preventDefault();
+ }
- var wheelD = event.wheelDelta;
- var pageY = window.pageYOffset;
- window.scrollTo(0, pageY - wheelD);
- });
+ }
第一行 // 通过检查发送ActiveX和user-agent值,来匹配IE浏览器和Edge浏览器。
第四行 // 筛选IE9(addEventListener),添加一个对滚轮的监听,添加函数动作。
第六行 // 判定筛选,ie10及以下不支持preventDefault(),ie11和Edge没有document.all
第九行 // 阻止event(即mousewheel)的默认行为(滚动页面)。
第十一行 // 去除滚轮的默认动作并重新绑定动作。
其实刨去皮肉,得到的骨架就是
- if (判定针对的浏览器—true/false) {
- document.body.addEventListener("mousewheel", function(){
- event.preventDefault();
- var wheelD = event.wheelDelta;
+ var pageY = window.pageYOffset;
- window.scrollTo(0, pageY - wheelD);
- });
碎碎念
其实个中原理,还没有完全搞懂。/(ㄒoㄒ)/~~
我猜测是ie下mousewheel的默认动作机制,与背景的fixed机制冲突有关。
所以当去除了默认机制,而改为纯页面上移,则没有问题。
待我深入了解后,回来补充。
Wait me Back
网友评论